JavaScript toolkit · Experimental alpha
Artist SDK
Save compositions, describe your artwork, and connect it to viewers and export tools.
For artists building generative work with code. Use individual modules alongside your existing renderer, animation loop, and controls. No wallet or hosted Oriel service is required.
Explore with Oriel: Kepler’s Dream, a work in progress by Mihira. Hosted on mihira.art.
- Core version
- 0.1.0-alpha.4
- License
- MIT
- Runtime dependencies
- None
- Environment
- Browser / Node.js*
*Rendering and interface modules require a browser. APIs are experimental; record the SDK commit with each artwork release.
01 / Modules
What’s included
The full SDK includes the modules below. Optional modules are imported separately, so importing the core does not start a renderer, panel, or viewer connection.
Core artwork
@oriel-art/artist-sdkSeeded random streams, validated parameters, traits, recipes, and explicit hooks for restoring artwork state.
Metadata
…/metadataArtist credits, project and edition descriptions, licensing, translations, and provenance references supplied by the artist.
Capabilities
…/capabilitiesTechnical and artist-defined output limits, request validation, optional runtime checks, and capture-and-screen tools.
Discovery & bridge
…/discovery · …/bridgeStatic artwork descriptions and an opt-in connection between an artwork in an iframe and its surrounding viewer.
Shader renderer
…/webglAn optional single-pass WebGL 1 renderer for fragment shaders, with PNG export of a saved frame.
Studio & information tools
…/info · …/parameter-panel · …/testingAn artwork information panel, parameter editing, boundary cases, seed sampling, and downloadable reports.
Paths beginning with …/ are subpaths of @oriel-art/artist-sdk.
Only need descriptions or output limits?
Use @oriel-art/metadata or @oriel-art/capabilities independently. Both are at 0.1.0-alpha.1 and work without the core artwork API or a renderer.
Metadata, capabilities, and discovery include TypeScript declarations. Core artwork, rendering, bridge, and older UI modules remain JavaScript-only.
02 / Integration example
Explore with Oriel
Try the SDK in Kepler’s Dream, a generative artwork by Mihira. Explore the parameter lab, play and seek through the animation, save and load recipes, and export a PNG.
Artwork by Mihira · Work in progress · Hosted on mihira.art
Built with Oriel Artist SDK 0.1.0-alpha.4, commit 33d529f. No local setup needed.
For developers: run the SDK examples locally
These are the SDK’s sample projects, separate from Mihira’s artwork. With Git and Node.js 22 or later installed, run:
git clone https://github.com/oriel-art/artist-sdk.git
cd artist-sdk
npm run devThe browser demos run from source. No dependency installation or build is needed.
Shader studio
http://127.0.0.1:4173/examples/webgl/- Change the seed, density, and palette.
- Pause the animation and save a PNG.
- Save the recipe to reopen that composition.
- Open Parameter lab to edit values and sample seeds.
Bridge viewer
http://127.0.0.1:4173/examples/host/See an artwork communicate with its surrounding viewer. Inspect its description, pause or seek, and change an exposed parameter.
These addresses work on your computer only while the local server is running. Open them in your browser rather than double-clicking an HTML file. Stop the server with Ctrl+C.
03 / Integration
Add it to your artwork
Choose the setup that matches your project. These instructions use the repository source rather than assuming an npm registry release.
Browser project without a bundler
Copy the repository’s complete src/ directory into vendor/artist-sdk/src/ in your project, preserving the folder structure. Include the SDK’s LICENSE and record its Git commit.
import { createArtwork } from './vendor/artist-sdk/src/index.js';Load your entry file with <script type="module"> and serve the project over HTTP.
Bundler or Node.js project
Build and pack the SDK from your checkout:
# From the artist-sdk checkout
npm ci
mkdir -p ../oriel-sdk-packages
npm pack --pack-destination ../oriel-sdk-packages
git rev-parse HEADInstall the resulting archive in your project:
# From your own project; adjust the path as needed
npm install ../oriel-sdk-packages/oriel-art-artist-sdk-0.1.0-alpha.4.tgzUse the filename printed by npm pack if the version changes. Keep the archive, lockfile, and SDK commit; experimental updates can share a version number.
A small first integration
After installing the package, save this as artwork.mjs and run node artwork.mjs. For the browser setup, replace the first line with the relative import above.
import { createArtwork } from '@oriel-art/artist-sdk';
const artwork = createArtwork({
id: 'line-study',
version: '1',
seed: 'composition-001',
parameters: {
density: { type: 'integer', min: 8, max: 36, default: 16 },
palette: { type: 'choice', choices: ['ink', 'clay'] }
}
});
// Use these values in your own drawing code.
const density = artwork.parameters.density;
const random = artwork.random('composition');
const angle = random.float(0, Math.PI * 2);
// Save the inputs as JSON.
const recipe = JSON.stringify(artwork.getRecipe(), null, 2);
console.log({ density, angle, recipe });This example produces values and a recipe; it does not draw an image. Pass those values into your own drawing code. Keep a random generator to advance its sequence—calling artwork.random('composition') again restarts that stream.
04 / Composition
Seeds, parameters & recipes
- Seed
- An exact string used to generate repeatable random choices. Separate named streams let you organize choices such as composition and colour.
- Parameters
- Numbers, integers, booleans, and choices with declared values and limits. Explicit values take priority over defaults; otherwise values can be sampled.
- Recipe
- A JSON record of artwork identity, versions, seed, and resolved parameters. Optional artist-defined context can record time, aspect ratio, or other state.
Your artwork supplies the restoration logic. A recipe is not a recording of simulation steps, GPU buffers, or interaction history. Keep matching artwork code and assets with it; restored inputs do not guarantee identical pixels on every device.
Explore parameters in the studio
The optional parameter panel provides sliders, precise entry, choice controls, boundary cases, and seed sampling reports. You supply the redraw callback and any checks for suitable compositions. The panel is available in studio mode; sampling alone does not establish artistic quality.
05 / Output
Rendering, export & print
Keep your renderer
Use SDK values and recipes with your existing canvas, shaders, assets, and animation loop. Rendering, export, and context recovery remain your code.
Use the optional runner
The SDK runner owns a fresh canvas and supports one fragment pass in WebGL 1 / GLSL ES 1.00. It exports a PNG by rendering the last successful frame’s saved inputs in a separate context.
Output size is checked against device limits and a pixel budget. The shader must support the requested size and aspect ratio; requests are not silently downscaled.
Describe what an output supports
Capabilities record technical limits and artist constraints such as image dimensions, formats, aspect ratios, physical print sizes, and DPI. Both sets of constraints apply. Validation returns supported, unsupported, or requires-evaluation.
Capture and screen one print job
The capture-and-screen workflow saves a composition, frame, output request, and print specification together. Artist-supplied checks run against that snapshot, so later live edits do not change the job.
Save the report with the exported image. Your integration handles rendering, colour profiles, and measurements; the SDK records the supplied checks and adds no print approval step.
06 / Artwork information
Metadata, discovery & viewers
Metadata describes the work: title, creators, editions, licensing, translations, and optional provenance references. These are artist-supplied descriptions; the SDK does not verify authorship or resolve references.
Static description
Publish an artwork.json file containing metadata and/or capabilities. Tools can inspect that description without executing the artwork.
Runtime connection
Opt into the iframe bridge to expose read-only information and selected controls. Register only the queries and commands the viewer should be able to use.
A declared capability does not implement a control or grant access to it. For example, advertising seek support and registering a seek command are separate decisions. Configure allowed viewer origins when exposing the bridge.
The optional information panel displays your own text, credits, and control descriptions inside the artwork. It works independently of the studio parameter editor.
07 / Status
Current limits
The SDK is experimental. The following are not provided by the current implementation:
- Automatic simulation replay or cross-device pixel identity.
- WebGL 2, textures, or multipass rendering in the optional shader runner.
- Video, frame-sequence or tiled export, colour management, or print profiles in that runner.
- Dedicated p5.js, Canvas 2D, Three.js, or platform publishing adapters.
You can still use the core utilities with your own renderer. Declarations and validation describe supported operations; they do not add an exporter or prove a rendering result.
08 / Reference
Guides & source
This page summarizes the current SDK documentation. The repository contains the full APIs, source, and runnable examples.
Artist quickstart
Package choices, installation, and a complete first integration.
JavaScript / WebGL integration
Recipes, renderer integration, PNG export, and iframe communication.
Capabilities & metadata
Output constraints, artwork descriptions, and static or runtime discovery.
Capture & screening
Saved print jobs, artist-defined checks, and linking images with reports.
Information & parameters
Artwork information panels and repeatable parameter exploration.
Recipe restoration
Custom parameter generators, frame context, and renderer bindings.
For a bug report, include the SDK commit, browser or renderer, expected result, and a small reproduction. Documentation reviewed October 28, 2026.