A minimalist implementation of the SolidJS reactivity engine running natively on Deno. This project demonstrates how to create a Single Page Application (SPA) architecture with granular reactivity using the real DOM, without the need for a complex compiler.
✨ Custom Zero-Dependency Hot Reload: As a proof of concept for modern web engineering, this project includes a hand-crafted Development Server featuring instant Hot Reload. Instead of relying on heavy third-party bundlers or WebSocket libraries, it leverages Deno's native watchFs, Server-Sent Events (SSE), and dynamic on-the-fly HTML script injection to automatically rebuild and refresh the browser on save.
- Fine-grained reactivity: Uses signals and effects for surgical updates to the real DOM.
- JSX Runtime: Interface processing via a HyperScript (h) function at runtime.
- No Virtual DOM: Unlike React, changes are applied directly to browser nodes.
- Native Deno: Built to leverage Deno's performance and security APIs.
- Batteries Included: Comes with a built-in router, auth system, and component examples.
Solid Lite ships with a demo inside src/ (a Counter, routed pages like About, Contact, UserProfile, and an enabled auth flow) to showcase the framework. When you are ready to start your own project, run:
deno task cleanup # interactive confirmation
deno task cleanup --yes # skip the prompt (for CI / automation)
⚠️ This action is destructive and cannot be undone. Commit your work first if you want to keep the demo as reference.
- Deno installed on your system.
- Deno extension for VS Code (recommended).
The project uses Deno's task system for automation.
To start the development server with Hot Reload enabled, run:
deno task devThis command will watch for any changes in your src/ and solid/ directories, automatically rebuild the project, and refresh your browser instantly!
If you want to clean the build cache to test the final, static distribution version (without Hot Reload), use:
deno task startTo see all available commands, run the following command in your terminal:
deno taskThis project uses Deno's built-in formatter. To ensure consistent code style across the project, you can run:
deno fmtFormatting rules and file exclusions are managed in the deno.json configuration file.
If you use VS Code and have the Prettier extension installed, it may conflict with Deno. To use Deno's formatter automatically on save, ensure your .vscode/settings.json is configured as follows:
"[typescript]": {
"editor.defaultFormatter": "denoland.vscode-deno"
},
"[typescriptreact]": {
"editor.defaultFormatter": "denoland.vscode-deno"
}/solid: Core reactivity logic and runtime./src: Application source code (components, pages, styles)./scripts: Auxiliary automation tools and local server./public: Static assets (favicon, redirects, etc.)./template: Clean starter used bydeno task cleanupto resetsrc/. If you choose to keep the demo insidesrc/and don't plan to run the cleanup task, you can safely delete this folder to avoid clutter.
Solid Lite features a "batteries-included" authentication system that supports both local development (mock mode) and real backend integration.
By default, authentication is disabled (const IS_AUTH_ENABLED = false) in src/config.ts so the demo opens directly on Home. Flip it to true to enable login, route guards, and the navbar hiding behavior on /login.
When IS_AUTH_ENABLED = true, the project ships in Mock Mode (empty API_BASE in src/config.ts) so you can test the authenticated flow immediately using:
- Email:
admin@example.com - Password:
admin123
To connect to a real server (e.g., following the Backend Specification):
- Open
src/config.ts. - Set
API_BASEto your backend URL (e.g.,https://your-api.com). - The
loginfunction will automatically switch to performing realfetchrequests and handling JWT tokens.
- sessionStorage: JWT tokens are stored in
sessionStorageinstead oflocalStorage. This ensures tokens are cleared automatically when the tab is closed, reducing the XSS exposure window. - Proactive Expiry Check: The framework decodes the JWT
expclaim and automatically logs the user out if the token expires, even before sending a request. authFetch: A secure fetch wrapper that:- Automatically injects the
Authorization: Bearer <token>header. - Triggers an automatic
logout()if the server returns a401 Unauthorizedstatus.
- Automatically injects the
- Sync Route Guard: Prevents UI flashing by blocking protected renders until the reactive auth state is verified.
Solid Lite ships with an extensive automated test suite that exercises both the reactive core (signals, effects, memos, resources, lifecycle) and the DOM-binding layer (h, render, Show, For, Switch/Match, Fragment, event delegation, refs, dangerouslySetInnerHTML sanitization, SVG namespace, cleanup paths, etc.). DOM tests run headlessly via @b-fuze/deno-dom — no browser required.
deno test # run all tests
deno task test:coverage # run tests + generate HTML/LCOV coverage reportsCurrent numbers for the code Solid Lite actually owns and maintains:
| File | Branch | Functions | Lines |
|---|---|---|---|
dom_setup.ts |
100.0% | 100% | 100.0% |
solid/index.ts |
94.0% | 86.7% | 98.7% |
Totals: 105 tests passing, with the remaining uncovered lines in solid/index.ts corresponding to defensive branches that are unreachable through the public API.
The framework also vendors
solid/solid.js(the SolidJS reactivity engine). Its numbers are included in the full coverage report but are not part of the Solid Lite implementation.
SolidJS is a trademark of its respective owners.
This project, Solid Lite, is an independent, minimalist, and strictly experimental implementation of a reactive runtime inspired by the principles of SolidJS. It was created solely for educational purposes to demonstrate how fine-grained reactivity and Single Page Application (SPA) architectures can be built using the native DOM on Deno.
Solid Lite has no commercial or business objectives. It is a study of architectural concepts and a hobbyist experiment in building lean web runtimes.
MIT