[!NOTE] This project is in β. Features and APIs are subject to change.
Scittle brings the Small Clojure Interpreter to the browser, allowing you to run ClojureScript using simple <script> tags.
Scittlets (short for Scittle applets) is a catalog of ready-made components and starter templates for building Scittle apps, covering charting, editing, UI, and developer tools.
A scittlet is a ready to use ClojureScript component designed for adding functionality to Scittle apps, with its JavaScript dependencies that can be loaded in any Scittle HTML file.
Each component includes examples and instructions for loading from CDN into your Scittle apps.
A CLI tool helps add and manage components, create projects from templates, and pack apps.
This repository offers the scaffolding needed to develop, test, showcase, and publish scittlets, served via jsDelivr from this GitHub repository.
👉 Visit the Scittlets website to browse components with live demos, copy installation commands, and explore starter templates.
New to Scittle? Create a starter app from a template with the CLI:
npx scittlets newAdd components to your Scittle app:
- Using the CLI: Manage components automatically with the Scittlets CLI (see below)
- Manual setup: Browse components on the Scittlets Catalog and copy script tags into your HTML file
Each component includes live demos and copy-paste code examples.
The scittlets CLI helps you create, manage, and pack Scittle apps and components.
Install globally with npm (requires Node.js and npm): npm install -g scittlets
Run commands with:
npx scittlets <command> [options]-
new [template] [output-dir]Create a new app from the specified TEMPLATE to OUTPUT-DIR. If no template is provided, lists available templates.
-
add <html> [scittlets..] [--list-scittlets]Add SCITTLETS dependencies to the target HTML file, or list them if none are provided.
Use
--list-scittlets(or-l) to list available scittlets from the catalog. -
update <html> [scittlets..]Update all scittlet dependencies in the HTML file at PATH using the latest catalog, or only those SCITTLETS if specified.
-
pack <html> [target]Pack the HTML file by inlining
<script src="">elements directly into the file.Saves the output to
target(default:packed.html). -
catalog [--release version]List all scittlets and templates in the catalog for the specified catalog release VERSION (default:
latest). -
releasesList all published release versions of the scittlets catalog.
List available templates:
npx scittlets newCreate a new app with a specific template:
npx scittlets new reagent/codemirrorAdd scittlet dependencies to HTML file:
npx scittlets add ./index.html scittlets.reagent.codemirror
List catalog release versions:
npx scittlets releasesList scittlets and templates for the latest release version:
npx scittlets catalogUpdate all scittlets dependencies in an HTML file to their latest versions:
npx scittlets update ./index.htmlPack an HTML file and specify output filename:
npx scittlets pack ./index.html output.htmlFirst, clone the repository:
git clone https://github.com/ikappaki/scittlets.git
cd scittletsInstall dev dependencies:
$ npm installRun the excellent cljs-josh live-reloading Scittle server:
$ npx josh
Serving ./ on port 8000:
- http://192.168.1.100:8000
- http://127.0.0.1:8000
SSE connection establishedScittlets are listed in catalog.json, the metadata registry.
Use this scittlet as a starting point for development:
- Code: src/scittlets/reagent/mermaid.cljs
- Metadata: catalog.json
- Card: test/scittlets/reagent/mermaid_card.cljs
- UI Test: test/scittlets/reagent/mermaid_test.cljs
- Test page: test/scittlets/reagent/mermaid.html
- Demo code: examples/mermaid/mermaid_demo.cljs
- Demo page: examples/mermaid/mermaid_demo.html
Licensed under the Eclipse Public License 1.0, same as Scittle. See LICENSE for details.