Skip to main content
A Design is an artifact that holds a shared canvas. You arrange screens, rectangles, text and images on it, and everyone who has the Design open sees each change, each other’s cursors and the layer each person has selected (a dashed outline in their colour, with their name) as it happens. Each person on the canvas has their own colour, the same on every screen. Crewship keeps numbered versions of the canvas, lets the owner share one version with readers, and can pass a comment on a layer to the agent of a chat you connect. Designs live in Artifacts, next to Projects, Dashboards and Slides.

Turn Design on

Design is off by default. It needs two switches, and both must be on: Enable the workspace flag with the CLI:
An operator can instead set CREWSHIP_ARTIFACTS_DESIGN_ENABLED=true in the server environment. That turns the server side on for every workspace on the instance, regardless of the workspace flag. Prototype playback of linked screens has its own build-time variable, NEXT_PUBLIC_ARTIFACTS_DESIGN_PROTOTYPE=true, on top of the two switches above; see Play a prototype. The Export HTML button likewise needs NEXT_PUBLIC_ARTIFACTS_DESIGN_EXPORT=true; see Export a version as HTML. The artifacts_design flag is independent of artifact_projects, the flag for Project artifacts. You can turn Design on without Projects. With NEXT_PUBLIC_ARTIFACTS_DESIGN on, /artifacts opens the Artifacts library even if NEXT_PUBLIC_ARTIFACTS_LIBRARY is off. In that configuration the sidebar still leads to /pages; open /artifacts directly, or also enable NEXT_PUBLIC_ARTIFACTS_LIBRARY. Without the Design variable, Designs are hidden from the library, and a Design editor shows Design is not enabled.
The Design tile in New artifact follows the build-time variable only. If the UI was built with Design on but the workspace flag is off, the tile is still offered and creating a Design fails with design not found. Enable artifacts_design for the workspace and try again.

Create a Design

You need permission to create pages in the workspace. Agents cannot create a Design; they can only edit one that a person made.
  1. Open Artifacts in the sidebar, or visit /artifacts directly if only the Design UI flag is enabled.
  2. Click New artifact in the top bar and pick Design.
  3. Select Design (“A shared canvas with screens”).
  4. Enter a Name, for example Checkout flow. Optionally choose a Folder. Start with offers only Blank canvas.
  5. Click Create and edit.
Without a folder, a new Design is visible only to you until you share it, apart from workspace owners and admins, who can read and edit every Design. Their access to a Design they do not own is recorded in the audit log. If you choose a Folder, the Design is added to that folder, and the dialog shows People with access to the folder: everyone who can open the folder can open the Design. Crewship saves the empty canvas as version 1.
After Create and edit, the library can show This artifact is not available. instead of the editor. The Design was created. Click All artifacts, select the new Design and click Open.
To open a Design later, select it in the library and click Open in the side panel. The Design opens at its own address, /artifacts/<id>.

The editor

Above the editor, the artifact bar has All artifacts, the Content and Access tabs and a Share button; see Give people access. The editor itself has four areas:
  • Header: the connection status, the Access, History and Save version buttons, and the initials of the other people on the canvas.
  • Screens list on the left: every screen and, indented under it, its layers. Click an entry to select it.
  • Canvas in the middle, with the toolbar Screen, Rectangle, Text and Image above it.
  • Properties on the right, with Comments below.
The status in the header tells you where your changes are: People with read access see a Read only badge next to the status.

Move around the canvas

Panning and zooming change only your own view. They are not saved in the Design, not in History, and the other people on the canvas keep their own view. Readers can pan and zoom too. A pan never moves or selects a layer, also when the drag starts on one. Inside the canvas the browser’s context menu does not open, so a right-button drag ends cleanly; everywhere else it works as usual. A press that travels less than 3 pixels is a click: it selects the layer without changing it. Space pans while the canvas has focus, or while the pointer is over it and no button, menu or text field has focus, so Space still presses a focused button. Fit shows every artboard and every layer placed directly on the canvas. With the canvas focused, + and − zoom, Shift + 1 fits, Shift + 0 goes to 100 % and the arrow keys pan. With a layer selected, the arrow keys move it by 1 pixel (Shift: 10), Delete or Backspace removes it (a screen, with everything in it, only through Delete screen and layers), ] and [ bring it forward or send it backward, and Ctrl + ] / Ctrl + [ (Cmd on a Mac) bring it to the front or send it to the back. Escape cancels a drag, resize or pan in progress and puts the layer or the view back where it started; with nothing in progress it clears the selection. Switching to another window, or the browser cancelling the pointer, does the same as Escape. With several layers selected, dragging any of them moves them all, the handles around the selection resize them together from the opposite corner, the arrow keys move them all, and Delete (or Delete N layers in Properties) removes the selected layers; selected screens stay. A plain click on one of them selects just that layer. The other people on the canvas see every selected layer outlined in your colour. When your administrator has turned on hide and lock, each row in Layers has an eye and a lock. A hidden layer (or everything in a hidden screen) is not drawn, played or exported, and stays dimmed in Layers. A locked layer stays drawn, but clicks and drags on the canvas go through it, a box selection leaves it out, and the arrow keys and Delete leave it alone; select it in Layers to inspect it, then unlock it before changing Properties. If a peer locks or hides a target while you are dragging, that gesture stops. Both are saved with the design for everyone. When your administrator has turned on shape style, Properties of a rectangle or an image has Corner radius, Stroke width and Stroke color. The stroke is drawn inside the layer, so its size does not change, and a rounded image is cut to its corners. Without these settings a rectangle keeps its 6-pixel corners and no stroke. Remove stroke takes the stroke off again. An image’s Fill is painted behind the picture, which shows through a transparent image. Commit a number in Properties by pressing Enter or leaving the field. An empty or invalid draft leaves the saved value unchanged. Next artboard and Previous artboard bring the artboard to the top left at the current zoom. They, the artboard picker and Fit skip hidden screens. On a phone, Fit fits the artboard’s width.

Add and edit layers

  1. Click Screen to add a 360 × 640 screen. Further screens line up to the right of the previous one.
  2. With a screen selected, click Rectangle, Text or Image. The new layer goes into the selected screen, or into the first screen if none is selected.
  3. Drag a layer on the canvas with the left button to move it; see Move around the canvas.
  4. Change the selected layer in Properties:
    • Name as shown in the Screens list.
    • X, Y, W and H in pixels. Positions of layers are relative to their screen.
    • Fill (or Text color for text), with a color picker or a value such as #16a34a.
    • Text for a text layer, and, when the build sets NEXT_PUBLIC_ARTIFACTS_DESIGN_TEXT_STYLE=true, its style:
      • Font: Sans, Serif or Mono. These are system fonts, so the canvas and the exported file need no font download.
      • Weight from 100 (Thin) to 900 (Black), Size in pixels (1 to 1000) and Line height as a multiple of the size (0.5 to 5).
      • Align: Left, Center or Right within the layer’s box.
      • Wrap to the box width: without it, lines break only where you press Enter. With it, lines break at the box width, and a long word breaks too.
      • Clip to the box: cuts off text that does not fit the box. Without it, text may run past the box.
      A text layer created before these settings existed keeps its look: 20 px Sans, Regular, line height 1.3, left, no wrap, no clip.
    • Image URL for an image: an https:// address, or an embedded PNG, JPEG, WebP or GIF data URL. Other addresses are not drawn.
    • Screen, to move a layer into another screen or to On canvas.
    • Order: Send to back, Send backward, Bring forward and Bring to front. A layer moves among the layers of its own screen, a screen among screens; layers later in the order are drawn on top.
  5. To remove the selection, click Delete layer. Deleting a screen with Delete screen and layers also removes every layer inside it.
Undo and Redo in the toolbar (or Ctrl + Z, Shift + Ctrl + Z and Ctrl + Y; Cmd on a Mac) take back and redo your own edits on this canvas since you opened it. They never take back another person’s change. When someone else changes a property you also changed (or deletes that layer), your step for it leaves the history, so undo never overwrites or removes their value. The same protection applies when someone later moves the same layer in the stacking order; unrelated property or other-layer changes keep your independent undo steps. In a text field the keys undo typing in that field. Colours follow the people present, so one may change when someone joins or leaves. Live updates reach the people authorized to view the live canvas. Shared-only readers keep seeing the shared version. The editor also keeps a copy of your unsaved canvas in this browser, so a crash or a lost connection does not discard it. If browser storage is full or blocked, the editor says so; keep the window open until it is connected and save a version.

When two people change one text

Your changes count as sent only once the server has confirmed them. Until then someone else can change the same text layer: while you are offline, or in the moment between your edit and the confirmation. Only one text stays on the canvas, and the choice follows the sync order, not the time. Crewship shows a Konflikt úprav notice to the person whose browser sees both, with the text that lost, whichever side it came from. Kopírovat text copies it. Obnovit tento text brings it back:
  • If the layer still shows the text the merge left, only the text changes. Its position, size, colour, name and link stay as they are now.
  • If someone changed the text after the conflict, nothing is replaced. The lost text lands in a new layer below, named (obnovený text).
  • If the layer was deleted, it comes back as it was.
The notice is kept encrypted in this browser and survives a reload until you close it, in every tab of the same person. When your text stayed on the canvas, the other person’s text is in the history only if it was saved in a version, so the notice shows it too. Only the text of a layer is compared. Position, size, colour and layer name stay last-writer-wins. Unconfirmed work and the canvas it was made from are kept in this browser, so the comparison also works after a reload, a lost write right or a new connection.

Play a prototype

Prototype playback is off by default. It appears only in a web UI built with both NEXT_PUBLIC_ARTIFACTS_DESIGN=true and NEXT_PUBLIC_ARTIFACTS_DESIGN_PROTOTYPE=true. Without the second variable the editor shows no Play button and no Link to screen field, and links already stored on a canvas are kept but do nothing.
You can link a layer on one screen to another screen and click through the screens as a prototype. Link a layer to a screen (needs write access):
  1. Select a rectangle, text or image layer, for example a Next button on Screen 1.
  2. In Properties, choose the target in Link to screen, for example Screen 2.
  3. To remove the link, choose No link.
The link is part of the canvas: people authorized for live reads see it immediately; shared-only readers see it on a new read or reopen after the owner shares a version containing it. Sharing does not push replacement document state to an already-open shared-only socket. It is saved in versions, and Restore brings back the links of that version. Screens cannot be linked themselves; link a layer inside the screen. People with read or Comment access see the link but cannot change it. Play the prototype (any access level, including read):
  1. Optionally select a screen or a layer inside it to start there. Without a selection, playback starts on the first screen.
  2. Click Play in the header. The screen opens on its own, without the editor around it.
  3. Click a linked layer, or move to it with Tab and press Enter or Space, to open its target screen.
  4. Click Back to return to the previous screen.
  5. Press Esc or click Exit to leave playback. Focus returns to Play.
Playback only shows the canvas. Nothing you click in it changes the Design, creates a version or is seen by other people. If a layer links to a screen that was deleted, Link to screen shows Deleted screen and the hint The linked screen was deleted. In playback the layer has a dashed outline, clicking it does nothing, and the bar above the screen says that the linked screen was deleted. Choose another target or No link to fix it. If the screen you are viewing is deleted while you play, playback says so; go Back or Exit. Agents and the CLI set the same link with the linkTo node field; see Command line.

Export a version as HTML

The Export HTML button is off by default. It appears only in a web UI built with NEXT_PUBLIC_ARTIFACTS_DESIGN_EXPORT=true. The export itself is part of Design on the server, so crewship page design export works whenever Design is on.
Export HTML in the editor header downloads one saved version as a single HTML file that you can open in any browser, attach to an email or archive.
  • The file holds every screen of that version, one below the other, with a list of screens at the top. Layers keep their position and size.
  • A layer with a prototype link becomes a link to its target screen in the same file, so you can click through the flow. A link to a deleted screen is shown with a dashed outline and goes nowhere.
  • Images stored in the Design (uploaded as data: images) are embedded. Images that point to a web address are left out and shown as Image not included, because the file never loads anything from the network.
  • The file contains no scripts. Text is shown exactly as typed, never as markup.
The file name and its header say which version it is, for example checkout-design-v3.html and Design version 3. What is exported: Only saved versions are exported, never the live canvas. If you have just made changes, click Save version first. A workspace administrator who exports someone else’s Design is recorded in the audit log. An export larger than 8 MiB is refused with Design export exceeds the 8 MiB file limit; remove or shrink embedded images, or split the Design. From the command line:

Save versions

The live canvas and its versions are separate. A version is a fixed copy of the canvas with a number and a message.
  • Click Save version to save the current canvas now. The button works only while the editor is connected.
  • While you edit, the editor saves an Automatic checkpoint version after about 10 seconds without further changes.
  • Saving a comment from an editable canvas first saves a Checkpoint before feedback version, so the comment points at the canvas you saw.

Browse and restore versions

  1. Click History in the header. The button shows the latest version, for example History · v4.
  2. The panel lists each version with its number, message and time. Click a version to view it. The header shows Version 3 and a History badge, and the canvas cannot be edited.
  3. Click Restore under a version to bring it back. Crewship saves the restored canvas as a new version on top of the history, so nothing is overwritten. Live readers receive the change; shared-only readers keep seeing the shared version until the owner shares another one.
  4. Click Live canvas to return to the editable canvas. Without edit authority, the button says Current view and returns to the view your access permits.
Restore and Share are shown only to people who can edit the Design.

Share a version with readers

Shared-only readers see the version the owner has shared, not the live canvas or other working versions. They can still see presence on the canvas. Until a version is shared, ordinary Read grantees cannot open the Design (the API returns 404).
  1. Open History.
  2. Click Share under the version you want readers to see. Only the owner of the Design can share; an editor who is not the owner gets a permission error. This Share is in the History panel; the Share button in the artifact bar gives people access instead.
  3. The version is marked Shared, and the panel shows Open shared version N, which opens that version on its own page.
Sharing another version replaces the previous one.

Give people access

There are two places to manage access, and both change the same access list of the Design:
  • Access in the editor header, next to History, opens the Design access dialog with the read and write levels. The steps below use it.
  • Share in the artifact bar above the editor opens the Share dialog that every artifact uses, with the levels Read, Comment and Edit. Read and Edit match read and write. Comment lets a person open the Design and add comments without changing the canvas, its versions or its sharing. The Access tab next to Content lists who can open the Design.
  1. Click Access in the editor header. The Design access dialog opens.
  2. Choose the subject: a user, a crew, an agent or Everyone in this workspace. For a user, enter their email address.
  3. Choose the level and click Grant:
    • read shows the shared snapshot and presence, without live canvas edits.
    • write can change the canvas, save versions and restore them.
  4. To remove access, click Revoke next to the grant.
Only the owner or a workspace administrator can change access. Workspace owners and admins can also open and edit every Design, including a private one nobody shared with them. Each time, an entry with the action design.workspace_admin_accessed is written to the workspace audit log. The same audited read applies to every other artifact type (see Sharing and access). Changes to access apply to new requests immediately. A person whose access is removed is disconnected from the open canvas within a few seconds. Grants for agents do not give an agent permission to run tasks; that is controlled separately.

What a reader sees

A person with shared-only read access who opens the Design sees:
  • the shared snapshot, with a Read only badge and View canvas in the toolbar,
  • the cursors and initials of the people editing (not which layer they have selected, which belongs to the live canvas),
  • in History, only the shared version,
  • comments on the shared version only.
Readers cannot add comments.

Comment on a layer

Comments are tied to one layer in one version.
  1. Select a layer, in the Screens list or on the canvas. The Comments area shows On and the layer name.
  2. Type in What should change?
  3. Click Save comment, or Send to agent if an agent chat is connected.
The comment appears in the list with its version and layer, for example v4 · Screen 1. Click that line to select the layer again. If the layer has been deleted since, the comment stays and says that the layer is no longer on the canvas; open its version in History to see the layer. Your unsent comment draft stays in this browser if you close the Design.

Send feedback to an agent

The owner can connect one of their private agent chats. Comments then go to that agent, which changes the canvas and answers in the comment. Before you start, a workspace owner or admin must allow the agent’s crew in the agent publishing policy: the policy must be enabled and list the crew. Otherwise sending is refused with “This agent’s crew is not allowed to create artifact projects in this workspace” (the wording says projects, but the check also covers Designs). Give the agent the crewship-design skill as well; see Give the agent its playbook.
  1. Open the private chat with the agent you want to use. Its address has the form /chat/<agent>?session=<chat-id>. Copy the value of the session parameter, not the part after /chat/, which is the agent. The chat must be yours, private and bound to an agent.
  2. In the Design, under Comments, paste the ID into Chat ID and click Connect agent chat. The section then shows Open agent chat.
  3. Select a layer, write the comment and click Send to agent.
The comment shows its delivery state: Delivery works only while the connected chat is open to realtime messages and runs with the trusted execution profile. Only the person who connected the chat sends comments to the agent. Comments from other people are saved on the Design without being delivered. The agent works through the design_get, design_apply, design_snapshot, design_versions and design_restore tools, under the permissions of the person who connected the chat.

Errors

Limits

  • Each version can hold up to 32 MiB, and the history of one Design up to 256 MiB.
  • The browser copy of an unsaved canvas is kept only up to 2 MiB.
  • A workspace holds at most 100 pages and artifacts in total.
  • An exported HTML file can be at most 8 MiB.

Command line

The same actions are available from the CLI under crewship page design: create, get, versions, apply, snapshot, restore, share, comments, comment, agent, watch and export. Run crewship page design --help for the details. A prototype link is the optional linkTo field of a layer: the ID of the target screen. "" removes it. For example, link the layer next to the screen checkout:
Agents use the same field in design_apply. Cancelling a group move restores its positions and retains another person’s independent size changes. Live selection awareness names at most the first 200 selected layers.