Small APIs. Explicit contracts.

One pinned import

Load CKCSS for presentation and DevinimJS for interaction. Runtime consumers need no npm package.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kayacuneyd/ckcss@v0.1.0-beta.1/dist/ckcss.min.css">
<script type="module" src="https://cdn.jsdelivr.net/gh/kayacuneyd/devinimjs@v0.5.1/dist/modules/dv-tabs.js"></script>

<dv-tabs data-label="Account settings">
  <section data-tab="Profile">Profile content</section>
  <section data-tab="Billing">Billing content</section>
</dv-tabs>

Build-free compatibility

New features must first work in the source runtime, then be added to the distribution. No compile-time template analysis, code generation or framework runtime is allowed.

One component object. No compiler.

Import component and html; declare typed props, local state, optional live sync, named actions and one view. A .dv.js file is ordinary browser JavaScript.

import { component, html } from '/assets/authoring.min.js';

component('acme-counter', {
  props: { start: 0, step: 1 },
  state() { return { count: this.props.start }; },
  sync: { start(value) { this.state.count = value; } },
  actions: { increment() { this.state.count += this.props.step; } },
  view() { return html`<button on:click="increment">${this.state.count}</button>`; },
});

Rule of thumb: use this path for ordinary components. Use BaseComponent only for advanced child capture, lifecycle orchestration or custom store work.

Core API

import { BaseComponent, html, define } from 'https://cdn.jsdelivr.net/gh/kayacuneyd/devinimjs@v0.5.1/dist/core.min.js';

class AcmeGreeting extends BaseComponent {
  initialState() { return { name: this.str('name', 'World') }; }
  template() { return html`<p>Hello ${this.state.name}</p>`; }
}

define('acme-greeting', AcmeGreeting);

Opt-in tools for richer pages

Import app.min.js only when a page needs async data, JSON requests, forms or hash routing.

import { createAsyncState, fetchJson, createForm, createHashRouter } from 'https://cdn.jsdelivr.net/gh/kayacuneyd/devinimjs@v0.5.1/dist/app.min.js';

const products = createAsyncState();
products.run(() => fetchJson('/api/products.json'));
const checkout = createForm({ email: '' });
const router = createHashRouter().add('/', 'home').add('/products/:id', 'product');
router.start();

Component contract

Components follow dv-kebab.js → DvPascal → define('dv-kebab', ...). Configuration uses data-*; outbound communication uses bubbling dv:* CustomEvents.

Native behavior is the baseline

Prefer native controls. Interactive components define keyboard behavior, focus behavior, labels, roles and live-region semantics. Tabs follow the WAI-ARIA tabs pattern; dialogs restore focus and close on Escape; status messages use polite announcements.

Escaped by default

Interpolated template values are escaped. The unsafe() boundary is explicit and must only receive independently sanitized HTML. Keep backend data in attributes or JSON and treat it as untrusted input.

Give agents a reliable map

Start with llms.txt for orientation, then use llms-full.txt and the component manifest for exact contracts.