Built-in elements

A lowercase name is an element: an HTML element, or one of Weft's own. Inside a canvas2d or scene3d, names mean that surface's shapes and objects instead.

• HTML elements render as themselves. Any HTML tag works; the ones listed below are those the language server knows and describes.
• Weft's own elements are listed with the attributes they take. They include heading, markdown, layout primitives such as column and row, and the drawing surfaces canvas2d, scene3d, shader and particles2d.
• Shapes and objects belong inside a drawing surface. The README's graphics section shows them at work.

Every element on the HTML side also takes class, id, label, role, style, hidden, events and motion-*.

These tables are generated from the element documentation the language server uses for hovers and completions, so they always match what the editor says.

Weft's elements

Elements on the HTML side that Weft adds.

heading

A heading: h1–h6 by level.

heading(level: 2) "Our services"

markdown

Renders Markdown (headings, emphasis, links, images, lists, quotes, code). Text is never parsed as HTML.

markdown(source: post.body)

column

A flex column (a div).

Also written stack.

column(class: "gap-4") { … }

row

A flex row with centred items (a div).

row(class: "gap-2") { … }

group

A labelled group (a div with role="group").

group(label: "Filters") { … }

text

Inline text (a span).

text(class: "font-bold") "Hi"

paragraph

A paragraph (p).

paragraph "…"

link

A link (a).

link(href: "/about") "About"

image

An image (img).

image(src: "/a.jpg", alt: "A cat")

slot

Where a component's content goes.

div(class: "card") { slot }

canvas2d

A 2D drawing: shapes (rect, circle, arc, line, path, text) drawn to a canvas, with accessible proxies for labelled shapes and click/hover events.

canvas2d(width: 200, height: 100) { circle(cx: 50, cy: 50, r: 40, fill: "#8b5cf6", label: "Dot") }

scene3d

A WebGL 3D scene, written like React Three Fiber: camera, lights, objects (mesh, primitives, text3d, model), groups, particles and html content.

scene3d(class: "h-96 w-full", controls: "orbit") {
    camera(position: "0 1 5")
    mesh { sphereGeometry(args: "1") meshStandardMaterial(color: "hotpink") }
}

shader

A full-surface animated fragment shader: a preset or your own GLSL. Reacts to the pointer.

shader(preset: "aurora", colors: "#000 #8b5cf6 #22d3ee", class: "absolute inset-0")

particles2d

An interactive 2D particle background: drifting shapes joined by lines, reacting to hover and clicks. Decorative unless it has a label.

particles2d(class: "absolute inset-0 -z-10", color: "#38bdf8", hover: "repulse", click: "push")

canvas2d shapes

Inside canvas2d(width, height, label): shapes drawn on a 2D canvas. A label makes a shape part of the accessibility tree.

rect

A rectangle, optionally rounded.

rect(x: 10, y: 10, w: 80, h: 40, r: 8, fill: "#22d3ee")

circle

A circle.

circle(cx: 50, cy: 50, r: 20, fill: "red")

arc

An arc or ring segment (degrees, clockwise from the top).

arc(cx: 50, cy: 50, r: 40, inner: 30, end: 270, fill: "#8b5cf6")

line

A straight line.

line(x1: 0, y1: 0, x2: 100, y2: 50, stroke: "white", line-width: 2)

path

A polyline or polygon through points, optionally smoothed.

path(points: "0,50 50,10 100,50", smooth: true, stroke: "#22d3ee")

text

Text drawn on the canvas.

text(x: 50, y: 20, align: "center", fill: "white") "Hello"

scene3d objects

Inside scene3d(width, height, label): the camera, lights, meshes and materials of a WebGL scene.

camera

The scene's camera.

Also written perspectiveCamera.

camera(position: "0 1 6", fov: 45)

light

The key (directional) light, and the hemisphere ambient. cast-shadow gives it shadows.

Also written directionalLight.

directionalLight(position: "2 3 4", intensity: 1.2)

ambientLight

Even light from everywhere.

ambientLight(intensity: 0.4)

hemisphereLight

Ambient light shading from a sky colour to a ground colour.

hemisphereLight(sky: "#bde0fe", ground: "#3a2e1f")

pointLight

A light at a point (up to four per scene). cast-shadow gives it shadows (a cube map, six passes).

pointLight(position: "2 2 2", color: "#f472b6", intensity: 2)

spotLight

A cone of light from a point towards a target (up to four per scene). cast-shadow gives it shadows.

spotLight(position: "-2 4 2", angle: 30, penumbra: 0.3, cast-shadow: true)

particles

A GPU particle field.

particles(count: 400, radius: 5, shape: "shell", color: "#a78bfa")

group

Groups objects under one transform.

group(rotation: "0 30 0") { … }

mesh

An object: a geometry child (boxGeometry, sphereGeometry, … or a text3d) and a material child (meshStandardMaterial, shaderMaterial). Without a geometry it's a unit cube. Takes @click and pointer events, and html children.

mesh(position: "0 1 0", @click: buy, label: "Lamp") {
    torusKnotGeometry(args: "1 0.3")
    meshStandardMaterial(color: "hotpink", roughness: 0.3)
}

cube

A cube (shorthand for mesh { boxGeometry }).

cube(size: 2, color: "#22d3ee", spin-y: 30)

sphere

A UV sphere.

sphere(radius: 1, color: "hotpink")

plane

A flat rectangle in the XY plane, facing +z, as three.js. Turn it with rotate-x: -90 to make a floor.

plane(size: 10, y: -1, rotate-x: -90)

torus

A ring torus.

torus(radius: 1, tube: 0.3)

torus-knot

A (p, q) torus knot.

torus-knot(radius: 1, tube: 0.3, p: 2, q: 3)

icosphere

A geodesic sphere.

icosphere(radius: 1.2, detail: 3, wobble: 0.3)

cylinder

A capped cylinder along y.

cylinder(radius: 0.5, height: 2)

cone

A capped cone along y, apex up.

cone(radius: 0.5, height: 1)

boxGeometry

A box's geometry, inside a mesh.

boxGeometry(args: "1.5")

sphereGeometry

A sphere's geometry, inside a mesh.

sphereGeometry(args: "1")

planeGeometry

A plane's geometry, inside a mesh: args: "width height", as three.js (one number makes a square). It lies in the XY plane, facing +z.

planeGeometry(args: "16 9")

torusGeometry

A torus's geometry, inside a mesh.

torusGeometry(args: "1 0.3")

torusKnotGeometry

A torus knot's geometry, inside a mesh.

torusKnotGeometry(args: "1.1 0.34 128 32 2 3")

icosahedronGeometry

A geodesic sphere's geometry, inside a mesh.

icosahedronGeometry(args: "1 2")

cylinderGeometry

A cylinder's geometry, inside a mesh.

cylinderGeometry(args: "0.5 0.5 2")

coneGeometry

A cone's geometry, inside a mesh.

coneGeometry(args: "0.5 1")

meshStandardMaterial

The built-in lit material: hemisphere ambient, Blinn-Phong, rim light, gradients, textures, fog. With preset, a shader preset drawn on the object instead.

meshStandardMaterial(color: "#8b5cf6", color2: "#22d3ee", roughness: 0.25, metalness: 0.6)

meshPhysicalMaterial

Physically based shading, metallic-roughness (as glTF, whose models use it): GGX highlights, the hemisphere ambient as a blurred environment, and texture maps. Tangents for normal maps come from the uvs.

Also written physicalMaterial, pbrMaterial, pbr.

meshPhysicalMaterial(color: "#e9b44c", metallic: 1, roughness: 0.3)

shaderMaterial

Your own GLSL. A source without #version gets a prelude (only what you don't declare): a_position, a_normal, a_uv, a_color; u_size (the mesh's size in world units), u_mvp, u_model, u_view, u_projection, u_normal_matrix, u_time, u_resolution (the canvas's, in device pixels), u_camera, u_color, u_opacity, u_map, the lights; snoise, weft_lambert(n, world), weft_skin(), out_color. Preset-style code (fbm, u_color[i]) gets the preset library. Uniforms come from uniform children or a uniforms record.

Also written rawShaderMaterial.

shaderMaterial(fragment: lava, transparent: true) {
    uniform(name: "u_noise", texture: "/noise.png")
    uniform(name: "u_tint", value: "#ff5a18")
}

uniform

A shaderMaterial uniform.

uniform(name: "u_amp", value: 0.3)

attribute

Per-vertex data for a shaderMaterial.

attribute(name: "a_offset", size: 1, values: offsets)

text3d

Text set in a font (TTF, OTF, WOFF, WOFF2, or a .wfont), flat or extruded, with the font's kerning. Needs weft's fonts feature for font files. Its text is its accessible label. With a material child, put the text inside the block.

Also written text3D, Text3D.

text3d(font: "/fonts/Inter.woff2", size: 0.8, depth: 0.2, bevel: 0.02) {
    "Hello"
    meshStandardMaterial(color: "#fff")
}

model

A model file: glTF/GLB (meshes, materials, textures, node and skeletal animation), OBJ+MTL, STL, PLY, an SVG drawing (its shapes as meshes, flat or extruded), or a .wmodel. Needs weft's models feature for model files. A material child replaces its own.

Also written gltf.

model(src: "/models/fox.glb", animation: "Run", scale: 0.02)

html

Real DOM in the scene (Weft UI components and all): pinned to a point facing the screen, or on a plane in perspective with transform. Inside an object it rides on it.

Also written Html.

html(position: "0 1.5 0", occlude: true) { Card { Button(@click: buy) "Buy" } }

HTML elements

Any HTML tag can be used. These are the ones the language server describes:

HTML attributes

On an HTML element, these attributes are written as text when they aren't null:

id, href, src, alt, value, placeholder, name, title, type, target, for, min, max, step, rows, cols, tabindex, autocomplete, inputmode, pattern, maxlength, minlength, colspan, rowspan, scope, abbr, datetime, lang, dir, rel, download, loading, decoding, poster, width, height, srcset, sizes, action, method, enctype, accept, list, form, headers, start, popover, popovertarget, spellcheck, draggable, enterkeyhint, allow, referrerpolicy, sandbox, srcdoc, preload, media, cite, crossorigin, frameborder, allowfullscreen, usemap, shape, coords, kind, srclang, content, charset, integrity.

These flags are written with no value when truthy, and left out otherwise:

checked, disabled, readonly, required, autofocus, hidden, inert, open, selected, multiple, controls, muted, loop, autoplay, playsinline, novalidate, reversed.

class, style, role, label (as aria-label), aria-* and data-* are written too, and gap, padding, margin, color and background go into style. Anything else is left out, except inside svg, where every attribute passes through.