Templates
Compare the static, dynamic, and standard templates that chroma new generates, and pick the one that fits your app.
chroma new copies one of three templates from $CHROMA_HOME/templates/, which chroma install fills from Chroma/cli/examples/. Templates are part of the CLI: their chroma.json files are what chroma validate and chroma build are tested against.
chroma new my-app --template static # default
chroma new my-app --template dynamic
chroma new my-app --template standardNew to Chroma and unsure which to pick? Choose dynamic for a UI app. Choose standard if the app also needs to save files or notes, because it ships a working file explorer on top of Chroma-Fs.
Compare
| Template | mode | Entry | dev.port | dev.desktop | Production build |
|---|---|---|---|---|---|
static | static | Flat HTML and JS files (index.js) | 4173 | false | Each listed file minified; engine WASM inlined into chroma.js |
dynamic | dynamic | src/main.chr, src/App.chr, src/components/ | 5173 | true | esbuild bundle (bundle.js) plus chroma_bg.wasm, optional zip |
standard | dynamic | Same as dynamic, plus Chroma-Fs files | 5173 | true | Same as dynamic |
All three declare chroma-fs, chroma-router, and chroma-style in plugins, vendor them under plugins/ with a plugins/loader.js, and ship a compiled pkg/ at the project root. Remove entries from plugins if you do not need them. The engine dev server is never copied into the project; the CLI uses the installed one.
The full dynamic manifest is shown in chroma.json.
static
Flat files with no module graph and no bundler. The build minifies the files in build.scripts as written. Use it for a small page where you do not need .chr modules.
dynamic
ES modules under src/ loaded natively in development and bundled by esbuild for production. This is the template to start a real app from.
standard
dynamic plus a complete Chroma-Fs integration:
chroma-fs.jsonwith thefilesystembackend and./database pathsrc/storage.chr, which creates a shared Chroma-Fs instance withcreateChromaFssrc/components/FileExplorer.chr, an explorer to browse, preview, write, and delete filesnpm run fs:initandnpm run fs:linkscripts, which wrapchroma fs initandchroma fs link
chroma new notes-app --template standard
cd notes-app
npm run fs:link # links the @chroma/fs package that storage.chr imports
chroma dev # opens Chroma Desktop in develop modeIn Desktop develop mode, files are stored on disk under the app data folder. In a plain browser (chroma dev --no-desktop), Chroma-Fs falls back to IndexedDB, as described in Backends. That split is a runtime mode effect, not a different chroma build target (Runtime modes).
To check it works: create a file in the explorer, restart the app, and confirm the file is still listed.
Related
- Runtime modes —
dev.desktopvs shipping Portable (web) - Configuration: the
chroma-fs.jsonschema - Plugins: how the Chroma-Fs plugin is loaded
- CLI reference