Pictor — Design & Image

Pictor is a working design studio built with AWC UI. Start with a template, move and resize its layers, add a live component, and export the result. The same document engine powers five native implementations, so you can explore the components in the framework you use.

Open Pictor Try the Arabic editor

Try it in five minutes

Choose a starting point. Open a project or start with an Orbit, Pulse or Fieldnotes template. Every layer remains editable.
Make it yours. Draw a rectangle, change its fill, drag it into place and resize it. Use the layer tree and inspector to arrange, group, hide or lock objects. Undo and redo preserve the edit history.
Insert a real component. Open Insert and add a live AWC control to the canvas. Explore how it behaves alongside text, artwork and shapes.
See how the interface is built. Select Components in the app bar to open the component explorer. Search for a component, inspect its rendered HTML, copy the example and follow its API documentation link.
Export your work. Download SVG, PNG or JSON. Open Quick actions with ⌘K / Ctrl+K, use ↑ / ↓ to choose a result and Enter to open it.

Choose your framework

Each build has its own native view layer and event bindings. All five share the document model, assets, exports and translations. The plain HTML version uses TypeScript and native Web Components without a UI framework runtime.

Build	Open the app	Browse the source
HTML	HTML studio	HTML source
React	React studio	React source
Vue	Vue studio	Vue source
Angular	Angular studio	Angular source
Svelte	Svelte studio	Svelte source

Open the control bar at the bottom to switch framework, theme, density, direction or language. These are client-rendered applications; language changes happen in place. Arabic includes translated interface labels, command search, right-to-left layout and Arabic number entry. Switching language preserves the text and names you have authored on the canvas.

Components in context

Part of the studio	AWC components to explore
File filters	Button group, Button
Canvas tools and panel navigation	Toolbar, Icon button, Tabs
Geometry and appearance	Number field, Color picker, Slider, Select
Commands, exports and feedback	Dialog, Text field, Snackbar

The shared document engine handles selection, geometry, reversible edits and persistence. The framework sources show how to connect those operations to the components.

Saving and export

Pictor saves your files and undo history in this browser on this site. Switching frameworks on the same site keeps that workspace available. Clearing site data removes the local copy; there is no account sync or collaboration backend. Projects, people and shared-file metadata are demonstration data.

SVG and PNG export the visible composition. Live controls become static vector representations, and image adjustments and blend effects are simplified. JSON preserves the layer model, including geometry, colors and component references.

Run locally

From the repository root, after installing dependencies:

pnpm --filter @awc-ui/core build
pnpm showcase:build --vertical design
pnpm showcase:preview 4317 --static-only --vertical design

Open the local React studio, then use its control bar to try the other four builds.