# Crank Component Authoring
> Build web apps, dashboards, landing pages, widgets, calculators, forms, quizzes, charts, visualizations, animations, dynamic SVGs, MathML equations, blogs, or games as single-file HTML with no build step, using Crank.js, an elegant UI framework which allows you to write components with plain JavaScript functions, generators, and promises. Use when user asks to create something interactive, build a single-file HTML app, or start a greenfield frontend project. Always trigger when converting code from React, Vue, Svelte, Solid, or any other web framework to Crank.js, when the user mentions Crank by name, or when comparing different web/UI frameworks. Not for projects already using other frameworks.
- Skill: `bikeshaving/crank-component-authoring` (Agent Skill, multi-file: 13 files)
- Install (CLI): `npx skillmds@latest add bikeshaving/crank-component-authoring`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bikeshaving/crank-component-authoring/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: bikeshaving (https://skillmd.com/u/bikeshaving)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bikeshaving/crank-component-authoring
---
# Crank Component Authoring
This skill was built against the Crank version in its metadata. Always check npm for the latest version before generating code, as APIs may have changed.
## JSX Template Tag (No Build Step)
Crank provides a `jsx` tagged template literal that runs directly in the browser with no transpiler, no bundler, and no build step. This is the recommended approach for single-file HTML artifacts, prototypes, and demos.
```html
Crank App
```
The standalone module exports both the `jsx` tag and the DOM `renderer` in a single import. For full documentation, see the [JSX Template Tag guide](docs/guides/11-jsx-template-tag.md).
## With a Build Step (JSX syntax)
When using a bundler, you can use standard JSX syntax with the `@jsxImportSource` pragma:
```jsx
/** @jsxImportSource @b9g/crank */
import {renderer} from "@b9g/crank/dom";
function *Timer({message}) {
let seconds = 0;
// Mount: start interval
const interval = setInterval(() => this.refresh(() => seconds++), 1000);
// Update: loop receives fresh props on each re-render
for ({message} of this) {
yield (
{message}: {seconds}s
);
}
// Cleanup: runs on unmount
clearInterval(interval);
}
renderer.render(, document.getElementById("app"));
```
## Not React — Quick Reference
| React | Crank | Why |
|---|---|---|
| `onClick` | `onclick` | Lowercase DOM event names |
| `onChange` | `onchange` | Lowercase DOM event names |
| `className` | `class` | Standard HTML attributes |
| `htmlFor` | `for` | Standard HTML attributes |
| `dangerouslySetInnerHTML` | `innerHTML` | Direct DOM property |
| `useState(init)` | `let x = init` | Variable in generator scope |
| `setState(val)` | `this.refresh(() => x = val)` | Explicit refresh |
| `useEffect(fn, [])` | Code before first `yield` | Generator mount phase |
| `useEffect(() => cleanup)` | Code after `for` loop / `this.cleanup(fn)` | Generator cleanup |
| `useRef(null)` | `let el = null` + `ref={n => el = n}` | Variable + ref prop |
| `useContext(ctx)` | `this.consume(key)` | No Provider components |
| `` | `this.provide(key, v)` | Called in generator body |
## API Surface
These are the complete public exports.
```js
// Core — components, elements, and rendering infrastructure
import {
createElement, // Create an element (called automatically by JSX)
Fragment, // Group children without a wrapper node ("")
Portal, // Render children into a different root node
Copy, // Reuse the previously rendered child tree
Text, // Render a text node with explicit text prop
Raw, // Insert raw HTML/markup via value prop
Element, // Element class (for type checking)
isElement, // Test if a value is a Crank element
cloneElement, // Clone an element with merged props
Context, // Component context class
Renderer, // Base renderer class (for custom renderers)
} from "@b9g/crank";
// DOM renderer
import {renderer, DOMRenderer} from "@b9g/crank/dom";
// HTML string renderer (SSR)
import {renderer as htmlRenderer, HTMLRenderer} from "@b9g/crank/html";
// JSX template tag (no build step)
import {jsx, html} from "@b9g/crank/jsx-tag";
// Standalone — re-exports everything above in one import
import {jsx, html, Fragment, renderer, domRenderer, htmlRenderer, DOMRenderer, HTMLRenderer} from "@b9g/crank/standalone";
```
### Context methods (`this` inside generator components)
```js
this.refresh(callback?) // Mutate state and re-render
this.schedule(callback?) // Run when this render's nodes exist, pre-DOM (once)
this.after(callback?) // Run after this render is in the DOM (once)
this.cleanup(callback?) // Run on unmount
this.consume(key) // Read a provided value from an ancestor
this.provide(key, value) // Provide a value to descendants
this.addEventListener(type, listener) // Listen for DOM or custom events
this.removeEventListener(type, listener) // Remove an event listener
this.dispatchEvent(event) // Dispatch an event up the tree
```
## Philosophy
Crank components are plain JavaScript functions and generators. State is variables. Props are values. Updates are explicit.
- The framework preserves generator scope across yields — local variables are your state.
- `this.refresh(() => { ... })` atomically mutates state and triggers a re-render.
- Props are plain values — destructure and transform them freely.
- Shared logic is plain classes, functions, and modules.
- Elements are immutable descriptions of what to render — never mutate an element or its props after creating it; build a new one instead.
## JSX Template Tag — Quick Reference
```js
jsx`
<${Component}>children
<${Component}>children
<>