Building a sketch

A sketch can be compiled into standalone static files (HTML, JavaScript, and CSS), making it suitable for deployment on any web server or hosting platform.

fragment build [filename]

Additional configuration options are documented in the CLI reference.

While in development, pressing p will open a preview that displays a version of the sketch as it will appear once built. While in this mode, changes made to the buildConfig object are hot-reloaded, allowing adjustments to layout, colors, dimensions, GUI settings, and styling to be seen immediately without rebuilding each time. This makes it possible to fine-tune the final presentation of the exported sketch while still working in the development environment.

By default, the fragment build command opens interactive prompts to choose the output destination and other build settings. This is convenient during manual development, but not suitable for automated environments such as Netlify, Vercel, or GitHub Actions.

For Continuous Integration workflows, prompts can be disabled using:

fragment build --prompts=false

When prompts are disabled, all required choices must be provided through CLI flags. This allows the build to run without user interaction, making it appropriate for deployment pipelines and automated exports triggered by commits or build hooks.

Refer to the CLI documentation for the full list of available flags that can replace interactive selections.

Build behavior can be customized directly from the sketch by exporting a buildConfig object. This makes it possible to adjust visual appearance, layout, rendering dimensions, and GUI behaviour.

// sketch.js
export let buildConfig = {
	backgroundColor: "red",
	dimensions: [256, 256],
	gui: {
		position: "float",
		align: "left",
		size: 0.4,
		output: false,
	},
  	styles: /* css */`
		:root {
			--color-active: red;
		}

		canvas {
			box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.35);
		}
	}`
};