source runs live — reactive web components with a buildless development workflow.
Live demo · Getting started · Guides · Architecture
srl is an Angular-inspired library for single-page applications built with web components. During development, the browser loads your JavaScript, HTML templates, and CSS as source files through an import map. You can check templates and types without compiling the application. A separate build produces minified files for deployment.
The library includes signals, dependency injection, routing, forms, localization,
authentication, remote applications, and a component collection. The
live example shows them working together.
Its source is in example/.
Create a project with Node.js 22 or later.
npx @srljs/cli@0.9.0 new my-app
cd my-app
npm install
npm run devsrl new writes a project whose application boots through the library's
startup, router, manifest, and locale bundle. npm run check checks types,
templates, the import map, and messages, and npx --no-install srl generate component <tag> adds a component. The server loads the source files directly
and updates open pages when they change. The CLI guide covers
checks, production builds, and deployment requirements.
You can also run this repository's example without installing packages.
npm run example # includes the demo backend at http://localhost:8100The getting started guide covers sign-in and the repository checks.
A component declares its element class and points to a sibling HTML template.
import { defineComponent } from '@core/elements/component.js';
import { SignalElement } from '@core/elements/signal-element.js';
export class GreetingCard extends SignalElement {
name = 'world';
}
await defineComponent({
tag: 'greeting-card',
element: GreetingCard,
module: import.meta.url,
});<h1>Hello, {{ name }}</h1>The template checker checks name against the class. The
component guide covers element dependencies, styles,
and data loading. The template guide lists the binding
syntax.
| Package | Purpose |
|---|---|
@srljs/core |
Browser source modules, components, templates, types, and package exports for bundlers. |
@srljs/cli |
Scaffold, development server, static checks, language server, and production build. |
For direct browser loading, serve the library's lib/ and components/ folders
on the same origin as your application. The published lib/importmap.json maps
@core/ and @components/ to those folders. The CLI writes this setup, and the
example document shows it in place.
For Node.js or a bundler, use the package exports.
import { defineComponent, SignalElement } from '@srljs/core';
import { UiTable } from '@srljs/core/components';The production build checks templates, compiles CSS, and writes minified, integrity-pinned assets. The delivery guide explains the artifact and its deployment checks.
The library lives in source/, the CLI in cli/, editor
clients in editors/, and repository checks in tools/.
The source layout maps the main modules.
npm install
npm run checkThe full check runs type and template checks, lint, tool and browser tests, package verification, and documentation checks. The contributing guide explains the smaller checks to run while editing.
The guides explain how to build an application. The architecture map describes the module boundaries, and the decision records explain selected design choices.
srl is MIT licensed. See LICENSE and the third-party notices.
The idea grew from conversations with coworkers about faster prototyping without a development build. AI coding assistants helped design, implement, and test this SDK.