staqlydocs
Dashboard

Design editor

Make post graphics and carousels in the browser: templates, text in self-hosted fonts, shapes, photos from your library or Unsplash with crop, shapes and background removal, AI pictures from a description, and a size for every channel.

Edit on GitHub

The design editor makes graphics for posts: a quote card, an announcement, a story, a carousel, a YouTube thumbnail, or a photo touched up for a channel. It works like pages you arrange: pick a size, add text, photos and shapes, and save to Media. It runs in your browser.

Open it

  • Design at the top of Media starts a new design.
  • Edit in a picture's drawer, or on pictures you selected in Media, opens them as a page of the first one's size. A picture saved by the design editor opens as its design again, at its page, with everything editable.
  • In a post, the pencil on an attached picture opens it in a new tab. Save it there and the post uses the result.
  • Links to the former photo editor (/media/edit) open here. Its projects can't be edited any more: their saved pictures open as new designs.
  • Design under a post's text opens a new design in a new tab. Save it there and the post gets the picture; saving again later replaces it in the post.

Make a design

The left bar holds the tools:

  • Templates: ready-made designs (quote, announcement, sale, event story, tips, testimonial, YouTube thumbnail) and your saved designs. A template replaces the page; Undo brings your page back.
  • Text: a heading, subheading or body text, or a styled one. Double-click a text to type in it. The bar above the page sets the font (13 fonts, served by staqly itself), size, colour, bold, italic, underline, alignment, letter spacing, line height, an outline, and Box: a coloured box behind the text with padding and round corners.
  • Photos: upload pictures (or drop or paste them onto the editor), pick them from your library, or, when the server has an Unsplash key, search Unsplash. Uploaded pictures go to your library too. With a photo selected, the bar above the page offers:
    • Crop (or double-click the photo): drag the photo inside its frame, zoom with the slider or the mouse wheel. Dragging a side handle of the frame crops too; the photo always fills its frame.
    • Shape: cut the photo to a circle, arch, hexagon, triangle, star or heart.
    • Remove background: done on your device, nothing is uploaded. The first use downloads the model (about 200 MB) from Hugging Face; your browser keeps it for next time. The cut-out goes to your library too.
    • Adjust (brightness, contrast, saturation, blur, black and white), Corners and flips.
  • Elements: squares, rounded squares, circles, triangles, stars, lines and arrows.
  • Background: a colour or a gradient, or the selected photo stretched over the page.
  • AI: describe a picture and AI makes it, or select a photo and tell AI how to change it ("put this product on a marble table"). It needs the workspace's OpenAI key (see below).
  • Layers: the order of everything on the page, with show/hide and lock.
  • Size: a page size per channel (Instagram feed and stories, TikTok, YouTube, X, LinkedIn, Facebook, Threads, Pinterest, Open Graph) or your own. With Fit the content to the new size, the design scales and stays centred.

The bar under the page holds the pages: add one, duplicate it, move it left or right, delete it. Several pages make a carousel; every page has its own background and elements, and they share the size.

Every element can be made see-through, given a shadow, brought to the front or sent to the back, locked, duplicated and deleted. Elements snap to the page's edges and centre and to each other; pink lines show where.

Keys
Ctrl/Cmd+Z, Ctrl/Cmd+Shift+ZUndo, redo
Ctrl/Cmd+DDuplicate
Ctrl/Cmd+ASelect everything not locked
Arrows (Shift: 10 px)Move the selection
Delete, BackspaceDelete the selection
EscSelect nothing

Save

Save to Media saves every page as a picture (JPG when it has photos, PNG otherwise; "Name (2 of 3)" for a carousel) and keeps the design itself, so it opens again editable. Saving again replaces the pictures; posts that use them follow. Opened from a post's Design button, a new design's pages are added to that post. Download saves the page on screen, or every page, as PNG or JPG without touching the library.

A design with Unsplash photos reminds you whom to credit when you save.

AI pictures

The AI tools run on your workspace's own OpenAI key: an admin adds it under Integrations › AI pictures, and OpenAI bills that account. Adding the key turns the tools on; Turn off forgets it. The server's operator can turn AI off for everyone with AI_DISABLED (configuration).

On this page