Getting started

Install

Add the core package to your project. Requires a modern Node.js or any host that can load the ESM/browser bundle.

npm

npm install @ruledwdl/core

Quick start (Node)

Create a memory store, define a page with REGISTRY / COMPONENTS / DATA (or a minimal page object), and call composePage. Layouts use {{content}} for the page slot.

composePage

import { composePage, createMemoryStore } from '@ruledwdl/core';

const store = createMemoryStore({
  layouts: {
    base: {
      name: 'base',
      COMPONENTS: [
        { layers: 'div.shell', attr: { '.shell': { text: '{{content}}' } } }
      ],
      DATA: { __design_tokens: ':root { --color-primary: #0284c7; }' }
    }
  }
});

const page = {
  title: 'Home Page',
  layout: 'base',
  COMPONENTS: [
    { layers: 'h1.title', attr: { '.title': { text: 'Welcome ${name}' } } }
  ],
  DATA: { name: 'World' }
};

const { html, dynamic } = await composePage(store, 'demo-tenant', page);
console.log(html);

Browser / CDN (no build step)

Load the standalone bundle and use window.WDL. Useful for demos, playgrounds, and static pages.

HTML

<script src="https://cdn.jsdelivr.net/npm/@ruledwdl/core/dist/ruledwdl.min.js"></script>
<script>
  const { composePage, createMemoryStore } = WDL;
  // composePage(store, tenantId, page) → { html, dynamic }
</script>

Data stores

Rendering is separate from storage. Start with an in-memory store; use the file store on Node when pages and layouts live on disk.

Stores

// In-memory (Workers-safe, tests, browser)
import { createMemoryStore } from '@ruledwdl/core';
const store = createMemoryStore({ layouts: {}, components: {} });

// File system (Node only)
import { createFileStore } from '@ruledwdl/core/file-store';
const fileStore = createFileStore('./my-project');
// layouts/<name>.json · components/<id>.json · pages/<slug>.json

CLI

Render a page to stdout or serve a project directory for local preview.

npx

npx ruledwdl render <project-dir> <slug>
npx ruledwdl serve [project-dir] [port]

Next steps

Learn the language model, try the live playground on the home page, or explore official examples in the repository.