Freon — The Language Workbench for the Web

[]

From documents to models
Freon is a language workbench that generates browser-based editors from your own domain-specific language (DSL).
It helps businesses capture knowledge in a structured way — turning Word-style requirements into models that can be automated, stored, and reused.

• ⚡ Easy to start: smart defaults and generators for common tasks.
• 🌐 Runs in the browser: editors are instantly usable, no complex setup.
• 🧩 Meta-languages for scope & typing: declare rules instead of hard-coding them.
• 🔀 Hybrid approach: combines projectional editing with parsing for flexible, natural DSLs.

📖 Freon documentation
🎮 Sample DSLs

Which Repo Do You Need?

💡 If your goal is to use Freon to build your own DSL, head over to the create-freon repository.
This repository (freon4dsl/freon4dsl) is for developing Freon itself — its core framework, editor engine, and generators.

Releases

• August 1, 2025: Version 2.0.0-beta.2 released
• May 13, 2025: Version 1.1.0-beta.3 released
  • Updated to Svelte 5 (was Svelte 4).
  • Performance improvements in generation.
  • Really fast hot reloading thanks to Vite.
• May 13, 2025: IDE plugin version 0.0.4 released → see details here

What is Freon?

Freon is a TypeScript/JavaScript framework for creating and implementing projectional editors for DSLs that run natively in the browser.
Beyond the core framework, Freon includes generators for many parts of a DSL’s working environment.

Developing Freon

If you want to work on the Freon framework itself:

Prerequisites

• Node.js
• npm

We typically use the latest versions, although older versions may work as well.

Build and Test

git clone https://github.com/freon4dsl/Freon4dsl.git
cd Freon4dsl
npm install
npm run build
npm run test

Running the Web App Editor

You can try Freon with one of the sample languages.

1. Build the language

cd packages/samples/<your-sample>
npm run build

2. Configure the web app

Edit packages/webapp-flowbite/package.json:

"dependencies": {
"@freon4dsl/<your-sample>": "2.0.0-beta.2"
}

Edit packages/webapp-flowbite/src/starter.ts:

import { LanguageEnvironment } from "@freon4dsl/<your-sample>";

3. Start the server

cd packages/server
npm run start

Note that the server keeps running in the background, therefore you need to open another terminal to start the web app.

4. Run the web app

cd packages/webapp-flowbite
npm run styles
npm run dev

➡️ Open the URL shown in your terminal (e.g. http://localhost:<port>/).
This will display the example language editor in your browser.

Source Organization

The codebase is organized into multiple packages:

• packages/core – main framework
  • src/editor → editor framework
  • src/language/decorators → MobX decorators
• packages/core-svelte – HTML & CSS integration
• packages/meta – DSL definition & code generation
  • languagedef → generates code from *.ast files (abstract syntax trees)
  • editordef → generates code from *.edit files (editor definitions)
  • scoperdef → generates code from *.scope files (scoping rules)
  • typerdef → generates code from *.type files (typing rules)
  • validatordef → generates code from *.valid files (validators)
• packages/samples – example DSLs
• packages/server – minimal demo model server
• packages/weblib-*` – shared web libraries
• packages/webapp-flowbite – current demo web app using Flowbite-Svelte
• packages/webapp-smui – older demo web app using Svelte Material UI (SMUI)