Atelier

The embeddable lix workspace

Atelier is a workspace UI — editor, files, history, and diffs — that mounts into any host application. Hosts bring their own lix; Atelier renders the space to work in it.

Atelier is the workspace engine inside any host. The included web preview demonstrates a browser app backed by Lix.

Why "Atelier"?

Atelier (French, [atəlje]) is an artist's workshop — the private studio where an artist and their assistants make the work. Not the gallery where it's shown, not the storage where it's kept: the room where the work actually happens.

That's this component's job. Lix holds the workspace — the files, the history, every change. Atelier is the room you step into to work on it.

Usage

import { openLix } from "@lix-js/sdk";
import {
	Atelier,
	ATELIER_BUILTIN_EXTENSION_IDS,
	createAtelier,
} from "@opral/atelier";
import "@opral/atelier/style.css";

// The host creates and owns the lix.
const lix = await openLix();
const atelier = createAtelier({
	lix,
	extensions: [
		{
			manifest: {
				apiVersion: 1,
				id: ATELIER_BUILTIN_EXTENSION_IDS.history,
				name: "Host History",
			},
			entry: historyExtensionEntry,
		},
	],
});

<Atelier
	instance={atelier}
	slots={{
		navbarStart: <a href="/">Host home</a>,
		navbarEnd: ({ currentFile }) =>
			currentFile ? <ShareButton file={currentFile} /> : null,
	}}
/>;

The instance is the programmatic workspace API and exposes its host-owned Lix:

atelier.lix;
await atelier.documents.open("/notes/idea.md");
await atelier.documents.startNew();
await atelier.documents.closeActive();

await atelier.diff.open({
	beforeCommitId,
	afterCommitId,
	source: { id: "claude" },
});

Document commands issued before <Atelier> mounts are queued and executed in order once the shell is ready.

Host extensions are passed as { manifest, entry } registrations. The host manifest describes the view while entry supplies its already-loaded icon and mount function; module paths belong only to workspace-installed extension manifests. A registration using an id from ATELIER_BUILTIN_EXTENSION_IDS replaces that bundled view. Its runtime receives the same revision controls as the bundled History view through atelier.revisions.current, .show(...), and .clear(). current contains only the transient reviewed branch id; extensions read branch and file history data directly from the host-owned Lix.

The target runtime is the browser. Atelier's fixed slots let a host fill bounded navbar regions while Atelier retains ownership of the workspace chrome.

What's in the workspace

Feature	Description
Editor	Markdown-native writing surface.
Files	Browse and open the files in the lix workspace.
Drawings	Sketch on an Excalidraw canvas (.excalidraw).
HTML	Run self-contained interactive HTML artifacts.
Inline diffs	Keep or undo edits with word-level context.
History	Inspect checkpoints and restore earlier drafts.

Powered by Lix

Atelier's change control is powered by Lix, a version control system that can handle any file format and is designed for building applications on top of.

Status

Atelier exposes one workspace instance and a React view for rendering it. The development preview lives under preview/web/.

License

Atelier is released under the MIT License.