A practical guide to actually using the app - opening a tool, working the canvas, exporting, saving and sharing. Local editing and rendering run on your device without an account, and work offline once the required tools and assets are available. Optional lolly.work features add organisation sign-in and shared services; expand the sections below when you need those workflows.
New here? The Quickstart gets you making things in minutes, and Lolly for Operators covers installing/deploying the app; this page is about driving it once it's open.
Opening a tool
The home screen is the gallery - every tool, grouped by category. Click a card to start something new in that tool; saved work reopens from Projects. Use the search box to filter by name - or Search from the bar at the foot of the six listing screens (the gallery, Utilities, Projects, Assets, the Dashboard and Settings), which reaches your saved work, your assets and your settings as well as the tools. Inside a tool the bar steps aside for the tool's own chrome.
signed by Lollyvector SVGCheck it yourselfGet the signed file23 paths~4.7k nodes39 groups61 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file23 paths~4.7k nodes39 groups61 KBTry it in the app
Each tool is a split view: controls on one side, a live preview (the canvas) on the other. Change any control and the preview updates instantly.
signed by Lollyvector SVGCheck it yourselfGet the signed file124 paths~6.2k nodes154 groups1 image179 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file124 paths~6.2k nodes154 groups1 image179 KB
A few tools (like Design) instead open as a free canvas - a chromeless, direct-manipulation surface where you drag, resize, rotate and snap boxes of text, shapes and images and double-click to edit text in place. It exports through the same render path as every other tool, so the canvas is the file. See The free canvas below.
Two ways to shape the grid itself into the one you want:
- Star what you use. ★ a card and it gets a big tile of its own in a strip above the grid - see Your favourites.
- Hide a tool you never use. Right-click a card (or select several and use the selection bar) → Hide tool. It drops out of the grid, and out of what typing in the grid finds; a grey Show hidden tools (N) tile at the very end reveals them again, dimmed, each with Unhide tool in its own menu. Hiding is only about your grid - the tool still opens from a saved link or a bookmark, and it stays exactly where it was for everyone else.
signed by Lollyvector SVGCheck it yourselfGet the signed file416 paths~76k nodes810 groups7 images1,815 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file416 paths~76k nodes810 groups7 images1,816 KB
To act on several cards at once, tick each card's checkbox, drag a selection box across empty space or Shift/Cmd-click, and a floating action bar appears. What the selection bar offers differs a little by view, since not every action makes sense everywhere:
- Tools / Utilities: Favourite (or Unfavourite), Hide (or Unhide), Available offline (or Remove from offline), View sessions (opens Projects showing only the sessions made with those tools) and Copy link when exactly one card is selected.
- Assets: Favourite and Hide apply to any selection; Duplicate, Download and Delete only appear once every selected item is one of your own uploads - a shared design-system asset is a permanent contract, so those three stay off it even in bulk.
- Projects: see Find and recover your work.
One label trap: View sessions only exists once something is selected. Right-clicking a single unselected card instead offers N saved sessions, which opens a list of that tool's saved sessions, where a delete moves the session to the Trash, rather than navigating to Projects.
signed by Lollyvector SVGCheck it yourselfGet the signed file21 paths~1.5k nodes20 groups25 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file21 paths~1.5k nodes20 groups25 KB
Ask Lolly
When you'd rather ask than hunt, Ask Lolly (#/ask) takes a typed question and hands back the matching section of this documentation verbatim - the guides' own words, not a summary and not a generation - with the page it came from cited and an Open in docs link beside it. Under the answer sit the places in the app the same question matches: a tool, a setting, a saved project, each as a button that simply navigates there.
The transcript is session memory: ask a follow-up and the thread builds up as you go, then reload and it starts fresh. Search results carry an *Ask Lolly: your query*** row at the bottom - under whatever concrete hits the other groups found - which hands the question straight over, so you can start in the bar and finish here.
The canvas (preview)
The preview always shows exactly what will export.
Desktop
- Zoom: Cmd/Ctrl-scroll, or pinch on a trackpad - zoom centres on your pointer.
- Pan: hold Space and drag, or drag with the middle mouse button. (Plain clicks stay free for clicking parts of the design.)
- Keyboard:
0= fit to window ·1= 100% ·+/−= zoom. - Zoom HUD: the small
− NN% + Fitcontrol in the corner. Click the percentage to toggle Fit ↔ 100%.
signed by Lollyvector SVGCheck it yourselfGet the signed file46 paths338 nodes21 groups36 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file46 paths338 nodes21 groups36 KB
Touch
- Pinch to zoom, drag to pan, double-tap to reset to fit.
Click to jump to a control: click any element in the design and the matching sidebar input gets focus and scrolls into view - for a repeating row group it folds open the exact row you clicked, so editing what you see is one tap away.
A dimension change always snaps the view back to a clean fit.
The free canvas (Design)
Free-canvas tools add a working surface around the artboard, like a designer's pasteboard:
- Off-canvas staging. Drag a box past the frame edge and it stays fully visible and selectable - park elements off to the side while you arrange the composition, then drag them back in. Everything outside the frame is gently faded so the export area always reads at a glance, and the frame keeps its shadow to mark exactly where the file begins.
- Only the frame exports. The exported file is bounded by the artboard - anything left outside (or the part of a box hanging over the edge) is simply cropped out of the output, in raster and vector formats alike.
- Zoom out past Fit (down to 20%) to see the whole pasteboard when you've staged things far outside the frame.
- Resizable artboard. Changing the export dimensions resizes the frame in place; boxes keep their positions, so you can reframe a layout around existing content.
- Before you export. The inspector's Document section checks the saved layer structure, then reads the settled canvas for clipped text and flat-colour contrast. It also asks the same font registry used by SVG/PDF outlining whether each text run has embeddable font bytes; image and gradient backgrounds are named as visual checks instead of being given a made-up contrast score.
signed by Lollyvector SVGCheck it yourselfGet the signed file264 paths~14k nodes270 groups4 images379 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file264 paths~14k nodes270 groups4 images379 KB
Flip a selection. Right-click any box and choose Flip horizontal or Flip vertical to mirror it in place, or press Shift+H / Shift+V from the keyboard - Shift, because a bare V is the Pointer tool. Each selected box mirrors on its own axis in one undo step, and the mirror is a real transform, so it holds in the exported SVG, PDF and PNG rather than only on the canvas.
Layers and Inspector
In Layers, each artboard is a collapsible parent group. Select its name to jump there, expand its layers, and select or reorder objects within that artboard. Switch to Pages for thumbnails and page ordering. Arrow keys move through the layer list; Left returns to the artboard heading.
The Inspector puts text or image controls first for the selected object. Use option chips for quick choices and expand Advanced for styling details. On phones, open Inspector from More actions. The controls open in a sheet; Escape or Back closes it while keeping your selection.
Drawing your own shapes (the pen)
Boxes, circles and rounded frames cover most layouts. When you need a shape that isn't in that list, draw it: the rail's Pen button (or the P key) puts you in drawing mode. Three single keys move between the modes - V back to the Pointer, P for the Pen, N for the node tool (Edit points) - and the Pointer is always the way out of whatever you're in.
signed by Lollyvector SVGCheck it yourselfGet the signed file56 paths388 nodes35 groups40 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file56 paths388 nodes35 groups40 KB
- Click to place a point. On the default curve type, click and drag pulls that point's handles out, which is how you draw a curve rather than a corner - hold Alt as you click for a hard corner instead. (On the other curve types every placed point is a corner and the drag does nothing; see Spline type below.)
- Points snap to the artboard and to your other boxes as you place them, drawing the same guides a normal drag does. Alt suppresses the grid while you draw, and both the grid and the edges while you drag a point afterwards.
- Click your first point to close the loop and finish in one move. Otherwise press Enter, double-click or just switch tools - the drawing is kept, not thrown away.
- Escape works one rung at a time: the first press abandons the drawing and writes nothing, and a second leaves the pen.
- Delete while drawing drops the last point you placed.
The result is an ordinary box on the canvas. Move it, resize it, rotate it, group it, align it, restack it, give it a fill, a gradient, a shadow or an opacity - a path behaves like every other box, and none of those controls treat it differently.
It arrives painted, too. The first path you draw takes the fill and stroke your brand gives a path, and after that each new path takes whatever you last used - set a fill once and keep drawing, rather than recolouring every shape. (In a tool whose brand says nothing about paths, a drawn path is stroked in the colour you watched it being drawn in, so it's never invisible.)
Editing the points again. Double-click the shape (or use Edit points on the object bar) and the points come back. Drag a point to move it, drag a handle to re-aim it, click anywhere on the curve to insert a point, rubber-band a group of points and press Delete to remove the selected ones. A path always keeps at least two points, so you can't accidentally delete it out of existence.
Spline type decides what kind of curve runs through your points, and it's the choice worth understanding:
| Type | What it does |
|---|---|
| Smooth (auto) | The default. Works its own handle lengths out, so plain click-click-click gives a genuinely smooth curve with no handle-wrangling. If you do set a handle, it pins the direction and the curve keeps ownership of the length. |
| Bezier handles | The classic pen. Handles are the control points, and inserting a point never moves the curve. |
| Through the points | Passes exactly through every point you placed, no handles. |
| B-spline | Flows near the points rather than through them, for a softer shape. |
| Straight lines | A polyline. |
Switching an existing path to a type that works out its own handles asks first, because the handle lengths you set can't be recovered - switching to Bezier handles is always lossless. Mid-drawing there's no prompt: the switch applies straight to the draft, and any handles you'd already pulled go with it. On the types that own their handles, inserting a point reshapes the curve very slightly; on Bezier handles it doesn't.
Each point also carries a continuity rule, shown by its shape on canvas - square for Corner (handles move independently), round for Smooth (handles stay in line), round-with-a-ring for Symmetric (in line and equal length). Set it for any selected points and the curve re-satisfies it immediately.
signed by Lollyvector SVGCheck it yourselfGet the signed file5 paths38 nodes7 groups5 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file5 paths38 nodes7 groups5 KB
A drawn path travels in the link like everything else, so a shape you draw reopens from a share link and renders identically from the CLI. Nothing about it depends on the editor.
Combining shapes (path operations)
Select two or more shapes, right-click the canvas (two-finger tap on touch) and the menu offers the operations you'd expect from a drawing app:
- Union merges them into one shape, keeping the topmost one's paint.
- Subtract cuts everything above away from the bottom shape.
- Intersect keeps only the overlap.
- Exclude keeps everything except the overlap.
Three more work on a single shape: Outline stroke… turns a stroke into a filled shape of the same outline (useful when you want to keep a weight exactly as drawn), Offset path… grows the silhouette outwards or, with a negative number, shrinks it inwards and Simplify rebuilds a path with fewer segments at the same shape.
signed by Lollyvector SVGCheck it yourselfGet the signed file5 paths47 nodes7 groups5 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file5 paths47 nodes7 groups5 KB
The result is a new path you can keep editing with the pen. Holes are real holes - a Fill rule control on the stroke panel decides whether overlapping contours fill (non-zero) or punch through (even-odd).
Two things these operations deliberately don't do. They refuse rather than destroy: ask to intersect two shapes that don't overlap and you're told there's nothing to keep, and nothing changes. And text and image boxes have no outline to work with, so they're left alone rather than approximated by their frame. A combined result is stored as plain Bezier curves, which is what a drawing app does too - the original spline type doesn't survive the operation.
3D scenes
Choose 3D scene from the add menu on the tool rail and drag out a frame: 3D Studio opens straight away on the new box, and what you set there comes back to the canvas. In every other way a scene box is an ordinary box. Move it, resize it, rotate it, give it a shadow, put it on a slide or on the timeline, and it behaves like the rest of them.
A scene box keeps the recipe, not a picture. An image box holds a rendered file; a scene box holds one setting, the scene itself, written as 3D Studio's own link query, with every value still at the studio's default left out. That is why a scene is about a hundred bytes rather than the few kilobytes a whole recipe costs, why the same string works in a share link and in the editor door, and why a new studio control needs no change in Design. It is also why the box re-renders at whatever size and moment the document asks for instead of being enlarged from a picture taken earlier. Pictures a scene uses stay assets and travel by id, so an upload inside a scene goes into a .lolly file with the rest of the document.
Edit it in the studio. Select the box and the Inspector shows a 3D scene section: a line naming what the scene is made of, a second naming its lighting studio once you have chosen one, and one button, Edit in 3D Studio. The button opens the studio on that box's scene with every control the tool has. Apply, and the edited scene is written back as a single step, so one undo returns the box to the scene you started from; close the studio without applying and nothing changes. Everything else about the box - its place on the artboard, how big it is, its shadow, when it arrives on a slide - stays in the sections it always used. A scene box takes no image of its own and no caption: its picture comes from the studio, and its words are set there too.
One live scene, a poster on every other box. Every 3D box in a document shows a poster: a still picture of the scene, drawn off screen through the shared renderer pool at the size the box occupies. A document with twenty scenes costs one drawing context, not twenty. Select a scene box and it becomes the document's one live scene; deselect it and the frame that was on screen becomes its poster, so nothing jumps. Only one scene is live at a time, and selecting two scene boxes at once leaves both as posters. In this release the live scene is for looking, not for orbiting: change a scene through Edit in 3D Studio. A device that cannot open a floating-point graphics context keeps the poster and says why inside the box rather than showing a blank rectangle, and the rest of the document is unaffected. Opening a Design document with no 3D box loads no 3D code at all.
On the timeline, a scene box follows the playhead like a video clip: its start, clip-in and speed move the scene through its own animation, and the scene's length is the one you set in 3D Studio, so trimming a box shorter shows less of the scene rather than speeding it up. Only the selected scene box is live; every other one is a still picture, and a still picture does not scrub.
In an export, each scene is drawn fresh at the size the file needs, through the same renderer the studio uses. A video renders one frame per scene per moment; a PNG, SVG or PDF embeds one picture per box at the box's own pixel size. Nothing is photographed off the screen, so an export does not depend on which box you had selected. A scene that cannot be drawn fails the export and tells you why, in the studio's own words.
Sharing a scene built on your own upload. A share link of a Design document carries a device-local upload id inside a scene as it stands, where an image box blanks it. So a scene whose artwork or model is a file you uploaded shows the studio's default for that picture on someone else's device, unless the document travels as a .lolly file, which carries the bytes.
Timeline (Sequence)
Sequence is Design's timeline: it adds time to the free canvas. Every box can start at a moment, run for a length and animate in and out, and a timeline docked under the artboard is where you arrange them. Open it and there's already a sequence playing - a title card, a clip, an end card, a lower-third and a music bed - so the model is visible before you change anything.
signed by Lollyvector SVGCheck it yourselfGet the signed file63 paths~8.8k nodes132 groups104 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file63 paths~8.8k nodes132 groups104 KB
There are two kinds of row, and the difference is the whole idea:
- The sequence row is magnetic. Clips sit gapless, one after another, and dragging one reorders the run rather than leaving a hole. Delete a clip and the rest close up. This is your spine.
- Overlay lanes are free. A lower-third, a logo, a caption - anything that floats over the spine at its own time - gets its own lane and its own start.
- Below those, Always on collects the boxes with no timing at all: scenery that's simply present the whole way through. The
+on a chip promotes one onto a lane; Make always on sends it back.
signed by Lollyvector SVGCheck it yourselfGet the signed file73 paths~2.3k nodes64 groups84 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file68 paths~1.2k nodes60 groups61 KB
Opening the timeline gives it the keyboard, so Space and the arrow keys drive the playhead rather than the page - and because it opens by itself on a composition that already has timing, that's true the moment Sequence loads.
The sequence editor goes deeper on the four things that decide whether editing in time feels predictable: which clip a canvas click edits, onion-skin ghosts of the neighbouring clips, split scope and the Join that undoes a cut and trimming (including the keyboard set). Press
?with the timeline focused for the shortcut sheet.
Editing. Drag a clip's middle to move or reorder it, drag within a few pixels of either end to trim it and press Split at playhead (or S) to cut one clip into two. Split needs a clip with a real Length and the playhead a little way inside it, so an open-ended clip (the music bed, for one) can't be split. Snap to edges is on by default and snaps to clip edges, the playhead and whole seconds, with Alt to override. Every drag is a single undo step, and the drag preview runs the same arithmetic as the commit, so what you see while dragging is what you get.
Select a clip and the inspector gives you the same edits as numbers: Length, Trim in (how far into the source it starts), Speed as a set of fixed multipliers from ×0.25 to ×4, Animate in / Animate out with their lengths and Mute clip. A clip on the magnetic row has no Start field on purpose - the row owns the order, so you drag to move it.
Transitions are presets, not keyframes: Fade, Pop, Grow, Rise, Drop, the four Slides, Zoom in and out, Tilt, Swoop, Spin, Drift or Cut (no animation). Distances scale with the object, so the same preset reads correctly on a full-frame card and a small badge. Between two adjacent clips on the sequence row there's a seam chip: click it and choose Cut or Crossfade, which applies at once and closes. Open the same chip again to change the Length (ms) and press Done. A crossfade is stored as a fade out of one and a fade into the next, and the actual dissolve is derived from that pair: the first clip plays on past the cut and fades out while the next fades in under it. The preview and the file use the same rule, so what you see at the seam is what you export.
Sound. Add an Audio clip and it lives on the timeline like any other clip: waveform, trim, mute. (The generated bed the default session ships with is the one exception - it's synthesised at export time, so its bar stays plain and silent until you render.) Press the mic to record a voiceover straight onto the timeline, with a count-in and a level meter, and the take is saved as your own asset at the point you started. Press the camera beside it to record a video the same way: the take is cropped to the artboard's export size as it records, so the small self-view shows exactly what goes onto the sequence at the playhead, full frame - the way to gather a colleague's clip from a shared link. Music, dialogue and a clip's own soundtrack all reach the exported mix. (The export panel's Audio track is a different thing: one bed laid under the whole clip, with fade and ducking. The two coexist.)
The audio strip. Select any clip that carries sound and a compact strip opens under the timeline: a Volume fader, Pan for stereo position, a three-band EQ (Low, Mid, High), a Pitch control that transposes in semitones while the voice keeps its character, and Normalize volume, which brings the clip to broadcast loudness (BS.1770) so a quiet voice note and a loud track sit level. Where two clips meet, Crossfade blends the junction instead of cutting. An Effect slot runs on-device processing on the clip - Voice cleanup takes the room and the hiss out of a recording. Speed changes keep pitch too: a clip slowed or hurried is time-stretched, not chipmunked. At every mix the export ducks music under speech as the speech comes and goes and holds the whole programme under a true-peak limiter, so nothing clips on the way out; a waveform that would have clipped is drawn with a warning where it happens.
signed by Lollyvector SVGCheck it yourselfGet the signed file52 paths~7.0k nodes90 groups79 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file52 paths~7.0k nodes90 groups79 KB
Rendering it. A motion export is a deterministic composite, not a screen recording - each frame is decoded, drawn and encoded at an exact time, so the file doesn't depend on your machine keeping up, and there's no practical frame ceiling on MP4 or WebM. The timeline's own length sets the duration unless you type one. Content Credentials are stamped as on any other export. A still export gives you the frame at the playhead, or a whole contact sheet from the Frames field beside the output size - see Exporting.
A few limits to keep in mind: a sequence is capped at one hour, GIF and animated PNG buffer their frames so they stay short, a clip played faster or slower keeps its pitch (the audio strip time-stretches it, and a Pitch control transposes in semitones with the voice's character kept) and Record live is hidden here because the compositor is the better path.
Beyond presets: keyframes, depth and a camera. A transition animates a clip as it arrives and leaves. To pose a box within a clip - drift it, fade it, blur it, lift it off the page and settle it back - add keyframes: select the clip, press +Keyframe (the diamond in the timeline's tool cluster, the diamond on the canvas object bar or K) and the playhead's position decides which pose your next edit writes. The same keyframe system gives every timed composition a camera that pushes in, pans across and pulls focus and turns one flat SVG into a stack of layers you can fly between. Animating is the full guide.
The Design tool has the same timeline, so you can time a layout without moving to another tool, and it exports motion too.
Presenting
To place your camera, a logo and a name caption over the audience picture, use Present with camera. Its private controls, saved scenes, sharing and recording steps are covered in Presenting with camera. The ordinary deck controls below remain available through Present.
A Design document made of artboards is already a deck. Open the Lolly menu on the tool rail and choose Present - the last row - and each artboard becomes a full-screen slide, in the order the artboards sit on the canvas. The deck runs on a copy of the rendered artboards, so the editor underneath is never touched and leaving puts you back exactly where you were.
- Advance with Space,
→, Page Down or a click on the strip at the right edge of the screen; go back with←, Page Up or the strip at the left edge. Home and End jump to the first and last slide. A small bar of controls fades in whenever you move the pointer and hides itself again once you stop. - Overview (
Oor the grid button) lays every artboard out at once in the arrangement you gave them on the canvas; click one to open it. - Reveal steps. Right-click a box and choose Reveal at step 1, 2 or 3 instead of the default Always visible. That box then waits until you advance onto its step, so a slide can arrive in pieces; boxes sharing a number arrive together.
- Speaker view (
S) opens a second window with the current slide, the one coming next, your notes for that slide and a running clock. If the browser blocks the pop-up it falls back to a panel over the deck. Notes are set per artboard and never appear on the slide itself. Bholds a black screen (any key brings the slide back),Freturns to fullscreen and Escape peels one layer at a time: overview back to the deck, deck back to the editor.- Kiosk. Give an artboard a Length and the deck holds there for that long, then advances itself behind a thin progress bar;
K(or the pause button, which appears only once something has a length) stops and restarts that. Addkioskto the link and the deck wraps at the end, which is what makes it signage.
- Sub-slide stacks. Right-click an artboard and choose Stack under the previous slide and it becomes a step of that slide rather than a slide of its own: the overview shows one card, the deck walks through the stack in order, and the inspector's Stack row says which slide it belongs to.
- Morph. When two consecutive slides both carry a box with the same Morph match name (right-click a box, or the inspector's Morph match row -
hero, say), the transition moves that box from where it was to where it is, resizing and recolouring on the way, instead of cutting. A deck-wide Morph transition does the same for every matched pair. - Narration. Each artboard's Speaker notes can be read aloud. In the inspector's Document section pick a Voice, optionally a second voice to Blend with, the reading Speed, and a Lead-in and Tail in milliseconds around each slide; turn on Show captions when presenting and the words appear as they are spoken. The voice runs on your device. The same notes become the film in a video export, real slide audio in a PowerPoint export, and the narrated film inside a SCORM package.
signed by Lollyvector SVGCheck it yourselfGet the signed file63 paths~6.2k nodes68 groups1 image80 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file63 paths~6.2k nodes68 groups1 image80 KB
The deck is a link as well. ?present opens straight into it, s= picks the slide - a position, an artboard id or id.step for a build step - and the address updates as you move, so what you send is the slide you're on. Tool authors: those parameters are documented on the URL Mode page.
On a phone
On narrow screens the layout reflows to one column:
- The controls become a sheet at the top with a drag grip on its lower edge. Drag the grip to resize it - it snaps to peek / half / full - or tap the grip to toggle collapsed ↔ expanded. The preview fills the space below and stays visible while you edit.
- A floating Export button opens the export sheet - all the format, size, copy, save and download controls in one place. Dismiss it by tapping the backdrop.
signed by Lollyvector SVGCheck it yourselfGet the signed file106 paths~2.7k nodes146 groups2 images91 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file106 paths~2.7k nodes146 groups2 images91 KB
Controls (inputs)
Tools expose only the inputs that are meant to vary - everything else (colours, layout, typography, logic) is locked in by the tool author, so whatever you make meets the rules the author set. Inputs include text, sliders, colour pickers, dropdowns, dates, image pickers and repeating row groups. Some are grouped under collapsible sections.
signed by Lollyvector SVGCheck it yourselfGet the signed file36 paths~2.6k nodes55 groups39 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file36 paths~2.6k nodes55 groups39 KB
Reset: Clear changes returns every input to its defaults.
Undo and redo
Cmd/Ctrl-Z steps back and Cmd/Ctrl-Shift-Z (or Cmd/Ctrl-Y) steps forward again. The same pair sits as Undo and Redo buttons in the row above the controls - on the free canvas they're on the tool rail instead - and each greys out while there's nothing left to take back. Every step says what it was: undo a colour and a small message tells you which input it just restored, with a Redo button in it for the way back.
- A drag is one step. Repeated changes to the same control within half a second merge together, so pulling a slider across its range is a single undo rather than two hundred.
- The last 100 steps are kept - older ones drop off the end. Making a fresh edit after undoing clears the forward stack, as it does everywhere else.
- While your caret is in a text box, Cmd/Ctrl-Z belongs to the field itself, character by character. Lolly takes over for the controls with no useful undo of their own: sliders, dropdowns, colours and switches.
- Choosing a file in a file input isn't a step - those bytes are held for the session only, so there would be nothing to put back.
In a live collaboration the history stays yours alone. A change arriving from the other device never goes onto your stack, so undo can only ever take back something you did.
Undo reaches back only through this visit; tools that save as you work also keep earlier versions under History, beside Undo (see Go back to an earlier version).
Your details & headshot
Settings (top-right of the gallery, showing your first name once you set one) holds your name, contact details and an optional headshot. Tools that ask for those fields pre-fill them automatically - set them once and your email signature, lockups and badges fill themselves in. You can override fields per session unless your organisation locks the input. Opt in with Use my details to create so your details ride along as the author on what you export.
Your personal headshot and details are stored on this device; optional sharing, Sync and organisation-managed details are covered in the profile guide. A profile can be more than just you - a team or a role you step into now and then. See Profiles for the full picture, including keeping more than one.
Saving & continuing
To keep your work, press Save as, the tick beside Export. Under Save to a project, leave My library selected or choose a project (+ New project… makes one), then press Save. Saving again updates the same item rather than making a copy. In Design, Save as is in the menu under the Lolly logo; on a phone, press •••, then File menu, then Save as.
The Save button in the export panel does the same in one click and never downloads a file: new work goes to My library, and work you saved before is updated where it is.
To come back later, press Home at the top left, then open the Projects tab (a folder icon on a phone). My library saves are on its first screen; a project is a folder there. Items are named after the file name you typed in the export panel, or else after their tool, such as QR Code. Open one and every setting is there, ready to change and export again.
Personal saves stay on this device, in the browser or app you saved from, unless you turn on Sync. Shared sessions in an organisation's Team projects are stored by its optional lolly.work service. A file you get with Download is a finished copy; to change it later, open the saved item in Projects. If something is not where you expect, see Find and recover your work.
signed by Lollyvector SVGCheck it yourselfGet the signed file2 paths240 nodes10 groups7 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file2 paths240 nodes10 groups7 KB
Projects
Projects, the Projects tab at the top of the home screen, holds everything you have saved, in folders you make. Finding, sorting and searching your work there, and restoring an item from Trash, are on Find and recover your work.
Team projects with lolly.work (optional)
If your organisation uses lolly.work, sign in to its instance and open Projects → Team projects for sessions shared with you. Access and retention are set by the organisation. For live editing, open a shared session and choose Share → Work collab when available; Working together explains the steps.
Your personal library remains separate. Signing in on another device gives you access to team work, while personal saves still need Sync or a backup to move across.
Sharing your work
A design goes out one of two ways: as a link or as a file. The Share dialog offers both. Open it with Share in the export controls; Share link on a saved session in Projects opens the same dialog for that session.
The link
Every input is captured in the page URL, so a link is the design. At the top of the dialog sits the ready-to-copy link, with two collapsed sections under it.
- Link options holds Open in the installed app (switches the field to a
lolly://URI for Shortcuts, launchers and automation, with every parameter unchanged), Shortest link (a big design makes a long URL, so this packs the whole state into a compact token and shows you the saving in characters; the readable form is always there too), Password-protect this link (AES-256 over the whole link, the password never in it) and Pin this tool version - the_vflag, which nails the link to the tool version you're looking at so a later update can't change what it renders. - Link behaviour is what happens when the recipient opens it: fullscreen, the export panel already expanded, download-on-open with
&exportor copy-to-clipboard with©.
Paste the link to a colleague, bookmark it or commit it. (Full details: URL Mode.)
Some tools make the link the whole product. Jump Page gathers your links into one page to hand out - a bio link, a conference talk, a shop front. There is nothing to host and no account behind it: the page is the link, so it opens as fast as the URL travels. In the editor you see the finished page beside the fields; a visitor who opens the link gets it full width, one link per scene as they scroll.
signed by Lollyvector SVGCheck it yourselfGet the signed file4 paths763 nodes13 groups14 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file4 paths763 nodes13 groups14 KB
The dialog says what a link cannot carry. Three things don't fit in a URL: an image or file you added from this device, a very long text value or a very large list. Each one is counted as the link is built. If anything had to be dropped the dialog lists it and points you at the file below, instead of handing you a link that opens with the picture missing. A link that is merely long gets a milder note with its character count, since packing can still rescue length.
Organisation-managed links with lolly.work
For sharing that needs an expiry, revocation or optional password, lolly.work supports managed links to shared sessions, tools and catalog assets. They resolve through the organisation's service and follow its access rules. They are separate from the self-contained design URLs above, and a revoked link cannot recall a file someone already downloaded.
See the lolly.work sharing guide for the available link types and permissions.
The .lolly file
.lolly is Lolly's portable-bundle extension, not a promise that every file contains the same thing. The format in manifest.json is the authority. The app reads that tiny manifest first and shows the size, contents and action before it writes anything:
- A shared design (
lolly-share) contains one saved tool session, its embedded files and a receipt for anything that still resolves by reference. It may also carry the tool and the design system used to make it. Opening adds a new Project; it never overwrites an existing session. - A shared project (
lolly-sharewith theprojectkind) contains a folder from Projects: its sub-folders, every saved session filed in them, each session's tile and the pictures filed there. Opening adds a copy of the whole folder to Projects; nothing already there is replaced. A Lolly from before project files existed cannot read one and says to update. - A design-system pack (
lolly-brand) contains tokens and may contain fonts, logos, published versions and retained resources. Opening adds it as a separate named design system, then switches to it; systems already on the device remain. - A brand workspace / instance pack is a
lolly-brandwith declared tools, catalogue assets and optionally an instance address. The preflight lists those device-wide effects because loading it replaces the single previously loaded workspace overlay.
A full device/profile backup is not a .lolly. It remains a LollyTools-….zip with format lolly-backup, and restores through Settings → Storage → Import data…, which also takes a copy Sync keeps in your storage. A plain zipped tool folder also remains .zip. In other words, session and design-system bundles own .lolly; backup and loose archive workflows do not.
Download .lolly, in the Share dialog of the tool you're working in, writes the current design as a shared-design bundle. It carries the saved session together with the images and files available on this device. Ordinary catalogue art rides along too. Licensed art is held back unless you explicitly include it, and a stale or unavailable file remains an external reference rather than disappearing. The prepared receipt shows the actual .lolly size, embedded-file count, external-reference count and whether the tool is included. Where your device has a share sheet, Send to… hands that file straight to it (AirDrop, an Android share) rather than saving it to disk.
Download project (.lolly), in a folder's menu in Projects, writes that folder as a shared project, so someone else can open it and carry on with every session in it. Each session travels as its own part (sessions/<key>.json, with its tile under thumbs/), the folder tree is listed in manifest.json, and uploads and catalogue art travel under the same rules as a single shared design. Batch sessions are not tool sessions and stay behind; the notice says how many. Download originals, beside it, is unchanged: a plain zip of each item as its own file.
A .lolly is an ordinary zip. Rename it .zip and open it: your own images are under assets/uploads/ and catalogue art under assets/catalog/, each with its real name and extension, manifest.json lists every one and a README at the top says what the file is.
Three things are yours to decide before it goes:
- Whether your name goes in. Your name, email and organisation are written into the file only when Use my details to create is on in your profile. With it off, the file records that it was made with Lolly and when - nothing about you.
- Whether licensed art goes in. Licensed and brand-locked assets are held back by default. If the design uses any, the dialog says how many and offers two buttons - Download without them or Include and download - because including them hands the actual files to whoever opens the
.lolly. - Whether the tool goes in. Include the tool packs the tool's own files alongside the design, so it opens on a device that doesn't have that tool. It arrives ticked for a custom tool - a fork or a private brand tool your recipient is unlikely to have - and unticked for a tool the signed catalogue lists, since their copy comes from the same source. (On a build with no signed catalogue, every tool counts as custom and the box starts ticked.)
Opening one. On an installed desktop or mobile app, double-click or tap a .lolly, choose Open with Lolly, or send it to Lolly from the system share sheet. macOS, Windows, Linux, iOS and Android all register the format; desktop file managers show it as a Lolly document (and GNOME Files can show a saved session's own thumbnail). In the web app, use Open or drop the file onto Lolly. Every door uses the same manifest-first preflight. Opening from Brand Studio recommends the design-system action when a shared design carries one, but it never re-labels the file or hides Open shared design.
An iOS or Android document handed in from another app is capped at 48 MB because the native hand-off has to copy its bytes across the app boundary. The mobile app says so instead of silently ignoring an oversized file. Open inside Lolly does not use that hand-off; it is the route to try for a larger bundle.
After confirmation the selected reader inflates and verifies the bundle once. A shared design's assets go to your library, its session goes to Projects and its tool opens when available. A shared project's sessions go to Projects under a new copy of its folders, with new ids so the same file can be opened twice, and the folder opens; a session whose tool this device lacks waits there. An asset already on the device is matched by checksum and reused. A design-system pack is stored in its own namespace before the app switches to it. Files over 100 MB are called out as large, and the preflight warns when browser storage reports less free space than the declared payload needs. Every integrity-covered part is checked before the operation commits; a damaged copy is refused and the newly-created destination is rolled back.
If the file carries a tool you don't have, Lolly asks before that tool can run: Trust this tool? shows the tool and its author and says plainly that opening it runs the tool's own code on your device, with Trust & install as the way through. Decline and the shared work is still saved to your projects, waiting there for the day you add the tool. (One kind of tool can't be sideloaded yet - one whose code ships as a module - and it's turned away the same way.)
A link and a file both hand over a snapshot. For live editing, Working together covers both private collabs between two devices on a shared network and optional work collabs through lolly.work.
Live camera (motion-reactive tools)
Every photo Filter - Halftone, Scanline, Posterize, Voronoi cells, Colour treatment, Pixel stretch and Imperfections - shows a Go live button where a camera is available. Turn it on and the effect tracks your webcam frame by frame, so it reacts to movement; you can record the result to GIF, WebM or MP4. Frames are read and processed on your device and never leave it, and the camera is released the moment you stop or leave the tool. (Any image picker also has Take a photo to grab a single frame as an on-device image.)
My images
When a tool lets you add an image from your device, it's kept exactly as it arrived - so a Content Credential on it still verifies - and saved to your personal My images library (under Settings → Storage). Only a genuinely huge file asks whether to keep or resize it. Reuse it across any tool. To scrub EXIF/GPS as images come in, turn on Strip metadata from uploads in your profile. There's no cap: the library is entirely local and limited only by your device's storage - manage or delete images there.
Assets - your library
Assets (#/a, or the Assets segment of the Tools · Utilities · Assets · Projects switch at the top of every listing view) gathers everything your tools can draw on - brand logos, images, audio and motion, grouped by kind - and it's where your own creative files live too. Your own uploads are stored on your device. An organisation using lolly.work can also supply a shared catalog, including uploaded assets and connected libraries; its access rules govern that content. See Use Lolly at your organisation.
signed by Lollyvector SVGCheck it yourselfGet the signed file256 paths~41k nodes433 groups850 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file256 paths~41k nodes433 groups851 KB
- Bring your files in. Drag any image, SVG, audio clip, video, Lottie, PDF or PowerPoint deck onto the upload area - or click to choose - and it arrives in Assets instantly, ready in every tool's asset picker. A multi-page PDF or a
.pptxasks which pages or slides to keep - each becomes an SVG asset. Ingest as much as you like; it never leaves your device. - Favourite what you reach for. ★ an asset (or a brand swatch) and it pins to the top of every picker, so your go-to logo or colour is one click away.
- Tidy up. Recategorise an asset into a different group, hide a shared brand asset you don't use (with Show hidden to bring it back) or delete your own uploads outright. The same multi-select gesture and floating action bar as Projects work here too, so any of that can be done to a whole selection at once.
- Lift a video off its background. Open a video's detail or right-click its card in any asset picker and choose Remove background… to save a transparent alternative - an animated WebP or PNG with real alpha. Pick a Method: an On-device model cuts a subject out of a busy scene, or a Colour key keys out an evenly lit, flat backdrop like a green screen or a plain wall, with Tolerance, Softness and Spill removal to tune the edge. The colour key needs no model download and no network, so Remove background is offered on any video and is often cleaner on tidy footage. A Resolution control (360, 480, 720 or 1080p, never past the source) trades detail for a smaller, faster file. It runs as a background job on your device. The finished cut-out is saved beside the original as its own asset and the source video's Content Credential rides along as an ingredient. (See Generated once, rendered the same for why removing a background stays a plain edit.)
Take your palette and fonts anywhere
The Swatches panel in Assets does more than display - click a colour to copy it, or download the whole brand palette in the format your other tool speaks:
- Design tokens (JSON), CSS variables or CSS classes - drop the brand straight into a stylesheet or a build;
- Adobe Swatch Exchange (.ase) - load it into Illustrator or Photoshop;
- GIMP palette (.gpl) - for GIMP or Inkscape.
signed by Lollyvector SVGCheck it yourselfGet the signed file135 paths~17k nodes195 groups225 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file135 paths~17k nodes195 groups225 KB
The Fonts panel lists your brand faces with a download beside each, to install locally or hand to a print shop. (The Brand Studio's Colours room offers the same palette download.)
Assets are one half of the open, do-it-yourself path; the other is making your own tools - the free canvas (Design, described above) lets you build one visually, no code required.
Sound & accessibility
Lolly aims to be comfortable to use for everyone. The interface is keyboard-navigable, custom controls carry proper labels for screen readers and every tool's live preview is exposed as a single labelled image describing what it's making.
A gentle layer of assistive sounds confirms what you do - arriving in the gallery, a valid vs. invalid Content Credentials check, closing a panel, switching a filter. It's off by default: turn Sound on anywhere the switch appears (each view's options popover, or Settings), and the choice is remembered.
Four opt-in comfort settings live under Settings → Accessibility: Reduce motion (drops the app's transitions and flourishes), Hide colourful previews (calm icon-and-text gallery cards, and quieter project thumbnails), High contrast (stronger borders, text and focus rings) and Large text (bigger app type - labels, menus, button text). All four settle the app around your work: they never reach inside a tool canvas or change a pixel of what you export, and each is off until you turn it on. Full detail in Your profile → Accessibility.
Beside the Sound switch is Neurospicy Mode - an optional, calming background focus track that plays quietly while you work. Turning it on opens a small player dock in the bottom corner that follows you across the app; from it you can search and pick a track, skip forward and back, set the volume and minimise or close it. The track list spans a few categories - procedural Lolly Sings tunes, ambient loops and beats, your own uploaded audio and a handful of live internet radio stations (these need a connection; everything else plays offline). It's off by default and, like Sound, is remembered across sessions and devices. Turning Sound off mutes the focus track too.
Storage & privacy
Lolly keeps your personal library on your device: in this browser's own storage in the web app, and in the app's own storage in the desktop and mobile apps. What is kept, what Clear all my data removes and what clearing browser data takes with it are on Find and recover your work; the Privacy Policy lists everything the app fetches or sends, and Server Surface the optional server components.
Organisation-held projects, assets and audit records follow the instance's policies. Clearing this device does not erase those server records; see Privacy.
Moving to another device
To carry your work to a second computer or phone, use Sync, a backup file or a .lolly file. Move your work to another device compares the three and walks through Export my data and Import data….
Importing a design (Figma, Penpot, Illustrator, InDesign)
You can bring an existing design into Lolly and keep working on it: open Design, click Import a design in the canvas toolbar, and choose a Figma .fig or SVG, a Penpot .penpot, an Illustrator .ai / .pdf or an InDesign .idml. Layers become editable boxes on the free canvas - text stays retypable, images land in My images and type and colours conform to the brand globals - then the result saves, shares and renders like any other session. The parse happens entirely on your device. Full detail: Import a design.
Exporting
See Exporting & Formats for the full story - choosing a format, output size and print units, transparency, video and copy/share. In short: pick a format, set the size if you need to and Download (or Copy to the clipboard).
Batch (Pro) mode
For power users, Batch (linked from the gallery, gated behind the Pro feature flag, which defaults on) renders many variations at once - a grid where each row is a set of inputs, exported together. Ideal for localising a card into a dozen languages or generating every size variant in one pass. Fill rows by typing, pasting straight from a spreadsheet or importing a CSV (you can export one back too), and set per-row format, size and output filename. Save a whole grid as a named batch session that reopens from the gallery, and download every row as a single .zip.
signed by Lollyvector SVGCheck it yourselfGet the signed file37 paths~3.5k nodes56 groups4 images52 KB
signed by Lollyvector SVGCheck it yourselfGet the signed file37 paths~3.5k nodes56 groups4 images52 KB
Batch is for generating many variants of one template at once. To re-render sessions you've already saved, use Projects → Render folder / Render selection (see Find and recover your work) - no Pro needed.
Editing side by side (Multi-edit)
Batch is many variants of one design. Multi-edit is the other half of the job: several different saved designs open at once, so one change applies to all of them. Tick between two and eight saved sessions in Projects and pick Edit together from the selection bar; they open as live cards side by side at #/multi?s=<slot>,<slot>…. Each card is a real render of that session, not a stored thumbnail, so what you see is what it will export.
One sidebar drives the lot:
- Shared leads it - every input that two or more of the selected sessions declare the same way (same id, same type, same constraints - the same merge rule the batch grid uses on its columns). Edit a shared control once and the value fans out to every session that declares it, live on every card. Two sessions of the same tool share everything; two different tools share only the inputs they have in common.
- Under it, one collapsed card per session with all of that session's own inputs, at the same fidelity as the tool's own sidebar - asset pickers, repeating row groups, colour fields - plus a compact export block: Format, W / H, Unit, DPI and its own Download. That Download saves the session first and then renders it through the ordinary session-export path, so the file carries the same filename, format and Content Credentials it would straight from the tool.
- Filter inputs… at the top narrows the controls across every card at once - which is how you get to "the headline" in eight sessions without scrolling for it.
Click any canvas (or press Enter on it) and that session's sidebar card opens and scrolls into view. Save all writes every session back to its own slot. Download all saves first, then renders the whole set through the same pipeline as Projects' Render selection - one zip, with the optional password lock offered on the way.
Two honest limits. The two-to-eight cap is real: every card mounts its own live runtime, and that's the number that stays responsive - a link asking for more (or for a session that no longer exists) says so rather than half-loading. And the link names your saved slots, so it reopens that set on this device; it is not a share link.
When the selection is bigger than eight, mixes tools or includes images as well as sessions, the escape hatch is Edit as sheet in the same selection bar: it opens the whole selection as rows in the batch grid (#/pro?s=…), with no size limit and no same-tool rule. Folders stay out of both - they have their own open-in-grid path. (Search is the one thing that doesn't reach in here yet: Multi-edit is the single view the search bar doesn't know about.)
Offline & install
Lolly is a PWA. It keeps working offline on the screens you have already opened, and The app under Settings → Available offline downloads the rest - install it from your browser's address bar (or Add to Home Screen on mobile) for an app-like, full-screen experience. It updates itself when you're back online.
About updates: if a view ever fails to load right after one (a blank panel, a "failed to fetch" in the corner), reload the page once - the app picks up the new version cleanly and your saved work, sessions and brand are untouched; only a picture you added and never saved may need adding again. It stores everything on your device, not in the page.
Design and Darkroom can keep original image precision with Wide colour / HDR editing, including Sequence video. Brand swatches can carry separate sRGB and P3 values. See Wide colour and HDR editing for output choices and current limits.