Fonto Design System (FDS)

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

Fonto's UI 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).

Use the FDS playground to play around with interactive examples for most of the components in FDS.

There is also an API reference for each of 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.

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.

  • FDS ConceptsThis page discusses various concepts that are important to understand when starting to build UI components with FDS.
  • React best practisesA collection of useful tips/tricks and best practises regarding React in general and FDS specifically.

Was this page helpful?