Fonto Design System (FDS)

This guide describes the available APIs for customizing and extending the FontoXML User Interface.

Fonto's UI was previously built using Angular 1.x directives with Jade/PUG templates and SCSS styles. Documentation for that version is available here.

The latest version is made with React and uses CSS-in-JS based styling.

To ensure visual and behavioral consistency in all of Fonto's applications, we decided to create a separate component library called Fonto Design System (FDS). This library is then used to create Fonto Editor specific components for specific editor features (prefixed with Fx).


We'll be starting with an overview of the external dependencies used by FDS, including some best practices we found in working with them, continuing our way up through specific concepts we used to create solutions for common UI challenges, ending with some specific tips on extending and customizing the actual Fonto Editor UI.

There is also an API reference for each of the FDS components and system utilities. Use this to look up specific prop names and method arguments and/or return values as you need them.

Another great way to discover how the existing editor UI is built using FDS and React is to use the react-devtools browser extension. This allows you to inspect the component hierarchy just like you would normally inspect the HTML DOM. This can give you great insight in how to structure and emulate common UI patterns and layouts used by the editor.

  • FDS ConceptsThis page discusses various concepts that are important to understand when starting to build UI components with FDS.
  • External dependenciesEverything in FDS is defined using JavaScript, including templates and styling. To achieve this, we used two main dependencies: React and Glamor.