design scripts

A design is one script, design.js, that declares its parameters and draws something from them. The same values always draw the same thing. ixi turns the parameters into sliders and input ports, and gives you presets, a studio and exports.

what a design is

A design has three parts:

export const meta = { format: 'svg', size: [1024, 1024], title: 'Rings' };
export const params = { rings: { type: 'int', min: 3, max: 40, default: 12 } };
export default function design(p, ctx) { /* return an svg string */ }

format is one of three:

format	what the script does	where it runs
svg	returns an SVG document as a string	the browser tab, or in the cloud with no tab open
canvas	draws on a 2D or WebGL canvas	the open tab only
model3d	builds a 3D model, op by op	in the tab, driving a 3D model node

Randomness comes from a seeded ctx.random, so a seed parameter gives a different but repeatable result. Don't use Math.random.

add one

From the dock, choose Design (2D) for svg and canvas, or Design (3D) to get a design plus the 3D model node it builds, linked together. The card shows the drawing (live while you select it), a few of its inputs and an output port on the right. A library icon, an export icon and the expand icon sit in the header.

Open the studio with Studio, the expand icon, or by double-clicking the picture.

the studio

• Left: the parameters, grouped by the sections the script names. A lock beside each one keeps it fixed when you randomize.
• Centre: a 2D design is shown on its artboard and updates as you drag. For a 3D design, the centre is the 3D model's own viewport.
• Right: three tabs. Code (the script and its other files), Console (what ctx.log prints) and Result (the output, and what design() returned).
• Header: undo and redo, the dice button (Randomize every unlocked param), Presets (Save current settings), Examples, and Save and Export to canvas for 2D designs.

Examples replaces the code with a starter: a vase you shape by dragging its outline (3D), a modular shelving system with a price quote (3D), a board stack (3D), a square Kufic lettering (SVG), the ixi lattice (SVG), a pixie sprite (SVG), noise rings (SVG) and dots (canvas). It resets values, and undo does not reach back across it.

parameters

Each parameter becomes a control and, apart from buttons and point lists, an input port on the card. Types: whole and decimal numbers, choice lists, colours, yes/no, text, points, picture, video, audio and file slots, a seed, and an action button. A parameter can add a label, a group, and a when rule that shows it only where it applies, which keeps long panels short.

Wire a node into a port and the wire beats the stored value. A text parameter can take a JSON file as text, or an SVG as markup (up to 1 MB), so a design can follow a drawing from another node.

A points parameter shows draggable handles over the artboard (2D) or in the 3D view. The vase example is a profile you pull in and out, up and down; the model rebuilds as you drag.

3d designs

A 3D design builds a model from the script's operations, and places repeated parts with one look and many placements: 30 shelves are one operation and one placement list. Give every operation a stable id and a run only rewrites what changed. Parts you edited by hand in the model are left alone.

The script returns a result. Three keys are shown live as sliders move: summary (key figures), tables (a cut list or a price quote) and notes (what the design could not do as asked). The shelving example uses these to show a quote that follows the sliders.

If a 3D design has no model yet, the card shows make the model it builds.

ask a pixie to write one

Describe the thing in chat: "a parametric vase with fluting and twist" or "a square-grid monogram generator with a palette parameter". The pixie writes the script, runs it, looks at the result and revises. Open the studio afterward to play with the sliders yourself.

the library

The library icon on the card header offers Save to library: the design can then be found in <kbd>⌘</kbd> <kbd>K</kbd> and reused in any project. A design placed from the library is an instance: it picks up library edits, while its own values and presets stay its own. The menu then offers Open the library entry, Push my changes to the library and Unlink. A dot on the icon means the library has an update to pull.

export

2D designs: Save keeps the SVG (or a PNG of a canvas design) as the node's output, and Export to canvas also puts it on the canvas as its own image node. The card's export icon does the same. 3D designs export through the model they build; see look and share.

limits & good to know

limit	value
files in a design	24
one file	128,000 characters
all files together	400,000 characters
a 3D run	500 operations, looks and parameters; 30 s of compute

• A design has no network access and cannot import from a CDN; split code into local files instead.
• A script that does not load (syntax error, no default export) is refused with the reason and nothing is saved.

related

• mesh and sculpt — the model a 3D design builds.
• live apps — for a tool that needs to call an API or run a UI, use a sandbox instead.
• modular shelving — a parametric shelving system built from a design.