AI-native graphics DSL renderer

About

Installation

npm install sciux-laplace
yarn add sciux-laplace
pnpm add sciux-laplace
bun add sciux-laplace

Usage

import { parse, root, renderRoots, render, defineComponent } from 'sciux-laplace'
import { type } from 'arktype'
const T = type({
 name: 'string',
})
const comp = defineComponent<'comp', typeof T.infer>((attrs) => {
 return {
 name: 'comp',
 attrs: T,
 setup(children) {
 const div = document.createElement('div')
 div.innerHTML = `Hello, ${attrs.name}!`
 return div
 },
 }
})
root.set('comp', comp)
const source = `<comp name="world" />`
// Parse and render
const ast = parse(source)
const roots = renderRoots(ast)
document.body.append(...roots)
// Or render directly
render(source, document.body)

Project Used