Getting started

This page installs silmaril in a Vite project and runs a first example.

Requirements

• Node.js ^22.18.0 || >=24.11.0.
• A bundler. This page uses Vite. Bundler setup covers the others.

silmaril is published as ESM only.

Install

npm install --save silmaril

yarn add silmaril

pnpm add silmaril

This page also uses Vite.

npm install --save-dev vite

silmaril compiles your code at build time with silmaril/compiler, which uses oxc-parser and magic-string. Both install with silmaril. The runtime (silmaril, silmaril/store and silmaril/solid) has no dependencies.

Add the plugin

Add silmaril/unplugin to vite.config.js.

// vite.config.js
import { defineConfig } from 'vite';
import silmaril from 'silmaril/unplugin';

export default defineConfig({
  plugins: [silmaril.vite()],
});

The plugin compiles every .js, .jsx, .ts and .tsx module that imports from silmaril. Other modules are not touched.

First example

Put this in src/main.js.

1
2
3
4
5
6
7
8
9
10
11

import { $$, $ } from 'silmaril';

$$(() => {
  let count = 0;

  $(console.log('Count:', count));

  count += 1;
  count *= 100;
});

$$ is the reactive boundary. count is reactive because the code writes it after its declaration. $ runs again when a variable it reads changes. The edits to count are batched, so the log runs once, after the code that wrote it.

Load it from index.html at the project root:

<script type="module" src="/src/main.js"></script>

Start the dev server with npx vite. The console shows Count: 100.

If a module that imports silmaril is not compiled, $ throws $ is meant to be compile-time only. when it runs. Check that the plugin includes the file. See the filter option in Bundler setup.

Next

• Bundler setup covers Rollup, the other bundlers, every plugin option and the compiler in the browser.
• Basic reactivity describes $$ and $.
• API reference lists every export.
• Migrating from 0.4 lists what changed, if you used silmaril before.