Multi-file FSCSS in the browser — compile, preview, enable packages, export plain CSS.
No install required. Open fscss.devtem.org/ide and work.
What it is
The FSCSS IDE is a single-page workspace for Figured Shorthand CSS: write .fscss, compile to standard CSS, preview HTML, and pull community modules without leaving the tab.
It targets the same language as the CLI and CDN runtime (fscss@1.2.6+). Prototypes stay in the browser; production still ships compiled CSS.
Layout (quick map)
| Area | Role |
|---|
| Top bar | Run, Preview, Auto-compile, Export, Import, theme, settings |
| Left | Files, Components, Snippets, Tools |
| Center | Monaco editor + file tabs |
| Right | Compiled CSS / live Preview |
| Bottom | Terminal + Problems |
| Status | Compiler version, errors, cursor |
Drag the dividers. On phones the sidebar overlays and panes stack.
Quick start
- Open or create
main.fscss.
- Ctrl+Enter — compile (CSS on the right).
- Ctrl+Shift+Enter — compile and open preview.
- Export — CSS, minified CSS, HTML, ZIP, or JSON backup.
Autosave uses localStorage (keys under fside:). Export a backup if the browser blocks storage.
Multi-file and @import
The workspace is a virtual file system. Local imports resolve against the importing file:
@import((widget-root, widget-card) from "./widgets.fscss")
@import((*) from st-core@v2)
@import((mirror, stagger) from fscss:micros)
Selective names, aliases (as), wildcards, and registry-style names work the same way as in the CLI. Remote URLs need quotes; listed library names usually do not.
Packages: libck / libon / xfcmd
Open the terminal (Ctrl+`):
libck st-core
yes
Or a full repo:
libck https://github.com/fscss-ttr/overlapui.fscss
yes
The IDE loads package.json, checks fscss_version, downloads file.modules, verifies @define helpers, then runs the pack’s enable script when you confirm. Typical enable flow:
- snippets for public helpers
- a small demo folder
- compile + preview
liboff st-core
xfcmd list
Disable removes snippets; demo files stay unless you delete them. Authoring side: xfcmds guide · modules guide.
What else is built in
- Monaco — FSCSS highlighting, folding, snippets
- Component search — registry helpers, one-click import
- Compiler version — load another
fscss@x.y.z from jsDelivr
- Auto-compile while typing (toggle)
- PWA-style install chrome on supported browsers
- Console —
window.xfscss for ad-hoc API checks
Docs: IDE guide.
Example: three lines → many classes
@arr classes[ count(1000, 1) ]
*Emails are not allowed*ses[] {
margin: @arr.classes[]px;
}
Compile in the IDE and scroll the CSS pane — or open a prefilled buffer:
Open in IDE
Example: enable a pack
libck st-core
yes
Then in a new .fscss file (or the generated demo):
@import((*) from st-core@v2)
@st-root()
@arr data[42, 58, 65, 60, 78, 70, 92]
@st-chart-fill(.fill, data)
@st-chart-line(.line, data)
.chart {
@st-chart-points(data)
position: relative;
height: 220px;
}
HTML: a .chart with .fill and .line children. Preview updates after compile. Same contract as the st-core templates: JS only patches --st-pN when data changes.
Ship path
| Stage | Tool |
|---|
| Learn / combine modules | IDE + runtime CDN |
| Real multi-file project | IDE export ZIP or clone + CLI |
| Production | fscss in.fscss out.css — no browser compiler on the live site |
npm install -g fscss@1.2.6
fscss src/site.fscss dist/site.css
Links
The IDE is meant to lower the cost of trying FSCSS: multi-file imports, package enable in one terminal prompt, and a clear export to plain CSS. It does not replace the CLI for production builds—it shortens the path until you need one.
Open it, hit Ctrl+Enter, and if a pack has an enable script, libon is enough to see a demo.