Using External Svelte Components

Freon offers a variety of native Svelte components, each associated with one of the box types in the editor framework. You can significantly modify their appearance via styling. However, you can give the editor a completely different look—or add custom functionality— by incorporating your own Svelte components, whether from a library or custom-made. For an introduction, see customization using external components.

In this extended example, you’ll learn how to use external Svelte components to customize the Freon editor. We’ll demonstrate how to add icons and buttons, use an Accordion component from a library, and create a sorted table component. Since the complementary web app already uses the Flowbite Svelte UI library, we’ll use it in our example. You’re free to choose any HTML component library and CSS tooling you prefer.

The source code for this example is available on GitHub—see Getting Started. Choose the language CourseSchedule. The files for each phase of the example are in folders named phase1, phase2, and so on.

When following along in your IDE, you may notice that after regeneration the browser occasionally shows a blank page. This happens because the browser refresh is sometimes faster than the regeneration process. (In the browser’s developer tools console you’ll see Uncaught SyntaxError: Unexpected end of input.) Don’t worry—just reload the page and everything will work correctly.