Create

JS API

prerender(code[, options])

Render a doodle to HTML ahead of time, in Node or any JavaScript runtime, so the page paints it without loading css-doodle. Returns a promise. It comes from css-doodle/generator, with the other generator exports.

Syntax

  • import { prerender } from 'css-doodle/generator'
  • await prerender(code[, { seed, attributes, variables }])
code
The doodle source, the same text you would put inside <css-doodle>.
seed
The seed. Without one, the seed attribute is used, and without that a seed derived from the code and attributes, so every build renders the same picture.
attributes
Attributes of the element as an object, such as { grid: 5, 'click:update': '' }. They are written on the element; '' or true writes a bare attribute.
variables
Values for the custom properties that @use or the use attribute reads, keyed with the leading dashes: { '--rule': 'background: red' }. At build time there is no page to read them from.

Result

html
A <css-doodle> element with the source as its text and a declarative shadow root holding the generated styles and grid. It may be preceded by a <style> for the time uniforms and a <link> for Google fonts.
seed
The seed written on the element: the seed option, the attribute, or the derived number. A @seed in the code still decides the picture.
needs
The features that only the runtime can draw. See below.
warnings
The diagnostics of the render, followed by the warnings from @doodle() bodies.

A declarative shadow root only attaches when the browser parses html as part of the page. Serve it in the document, or insert it with setHTMLUnsafe(); innerHTML leaves the doodle blank.

What needs the runtime

CSS animations, transitions and @t play without the runtime. needs lists the rest, so you can decide whether to load it.

ValueWithout the runtime
shader@shaders and @pattern images are left out.
mouse, size@ux, @uy, @uw and @uh stay at 0.
clock@T and @TS count from the build, not the visit.
updateclick:update and auto:update do nothing.
safariAn animated, sized @doodle image is drawn unscaled in Safari.
variablesA variable that @use or use reads had no value in variables.

When the runtime does load, it draws the doodle again from the source kept in the element, with the same seed, so the picture does not change.

Examples

Write a static page, and add the runtime only when the doodle needs it:

import { writeFile } from 'node:fs/promises';
import { prerender } from 'css-doodle/generator';

const { html, needs } = await prerender(`
  @grid: 8 / 320px;
  background: @p(#000, #fff);
  @random(.2) { border-radius: 50%; }
`);

const runtime = needs.length
  ? '<script type="module" src="https://esm.sh/css-doodle"></script>'
  : '';

await writeFile('index.html', `<!doctype html>${html}${runtime}`);

Pass the attributes and the variables the doodle reads:

const { html } = await prerender('@grid: 6 / 240px;', {
  seed: 'cover',
  attributes: { use: 'var(--rule)' },
  variables: { '--rule': 'background: @p(#e6437d, #ebbf4d)' },
});

See also