On this page ...
Integrating a Freon Editor into your own Web App
As explained in Getting Started, the web application that Freon provides will usually need to be replaced with appropriate solutions for the company or organization where the resulting product will be used. In this example we explain how to integrate a Freon editor in your own web app. The code that is shown here can be found in a GitHub repository called IntegrationExample.
Note, this example does not extend to a complete web app. Many aspects that are necessary in a proper product
still need to be implemented. Because these aspects highly depend on the exact look-and-feel and functioning
of the web app, the variation will be extreme. Therefore, we leave these aspects as ‘an exercise’. The aim of
the example (and the GitHub repo that accompanies it) is to give you some pointers on how and where to use
functionality from the Freon core and core-svelte packages.
Mono Repository
In the IntegrationExample repository we have combined two projects into one mono repository, a Freon language
project in the package dsl, and a Flowbite web app project in
the package webapp. To make everything working in a mono repo slight changes were made to the package.json files, but in essence you can start with the ‘Getting Started’ projects from both sources.
Of course, you can also choose to use other UI and CSS libraries.
Baseline Web App
In the webapp package of our mono repo we have created a Flowbite web page with some initially empty places where
the Freon editor, and other information, for instance about the language, should be added.
This web app resembles the one that comes with Freon, which was built
using a different Svelte library called Svelte Material UI, and a different CSS library (Sass).
If you want to dive into the code in our repository, take a look at the pull requests. We have tried to keep the example as clean as possible, such that almost every pull request represents a step in this tutorial.