Open source · MIT · 3.4 KB gzipped

Run design boards as plain HTML

dc-lite renders interactive design boards written with {{ holes }}, <sc-for>, <sc-if> and a DCLogic component class, the format Claude Design boards use. Your prototype runs on GitHub Pages, Netlify or any static host, with animations, timers and click logic intact. No editor, no login, no build step.

Get it on GitHub See 19 boards in production

260lines of runtime

0build tools

1command to convert

Live board. Click Kill or Scale: the list re-renders, the spend counter keeps ticking.

How it works

One board file in, one page out

# convert a board, images named by asset id go in ./assets
node tools/convert.mjs Board.dc.html --out dist --assets ./assets
cp src/dc-lite.js dist/
npx serve dist

class Component extends DCLogic {
  state = { count: 0 };
  renderVals() {
    return {
      count: this.state.count,
      wave: () => this.setState(s => ({ count: s.count + 1 }))
    };
  }
}

Patches, not repaints

Each render patches the live DOM with morphdom and skips any subtree whose markup did not change, so CSS keyframes never restart.

Refs keep their text

Counters written through ref at 60 fps survive a re-render, the same as in React.

Events that stick

One capturing listener per event type on the root, so handlers outlive patches and media events like onPlaying still fire.

Familiar lifecycle

setState with batching, componentDidMount, componentDidUpdate, componentWillUnmount, destroy().

Supported syntax

What a board can use

{{ a.b }}

Dotted lookups into renderVals() in text and attributes. False and null render empty.

<sc-for list as>

Repeat children per item, with itemIndex available.

<sc-if value>

Render children when the value is truthy.

onClick="{{ fn }}"

Any onX handler, delegated from the root.

ref="{{ fn }}"

Callback and object refs, plus a React.createRef shim.

data-props

Declared defaults become this.props, overridable from DCLite.mount().

Not supported yet: nested components through <dc-import> or <x-import>. dc-lite is an independent project, not made or endorsed by Anthropic. Claude is a trademark of Anthropic.