Use this page when you recognize an icon but do not know its name, purpose or location. Each read-only UI block is followed by a control reference and links to the detailed how-to guides.
These references render the actual editor components and styles with sample data, not recreated controls. They cannot change your artwork. Tooltips in the real editor provide the control names used below.
Where are the main parts of the editor?
On desktop, the top bar runs across the top, the tool rail sits at the left, properties open beside it, and zoom controls sit at the bottom-right of the canvas.
- Find the top bar across the top: it contains files, history, Generate, saving and image output.
- Find the tool rail at the left: it selects what you want to add or edit.
- Find properties beside the rail: it shows controls for the tool or selected layer.
- Find canvas zoom at the bottom-right: it changes your view, not the exported artwork dimensions.
Expected result: You can locate an action by its area before looking for its exact icon.
The workspace can contain a selected object, an open panel or neither. Selecting an existing layer opens relevant properties. Closing a panel does not delete its content. On small screens, the tool rail becomes a bottom dock and properties sits above it.
Top bar: files, history, saving, sharing and export
Look beside kruti for Design files, Undo, Redo and Generate. Look at the right end for Save current project, Share post image and Export post image.
- Start at the folder icon beside the brand for file operations.
- Use the curved arrows for Undo and Redo; unavailable actions appear dimmed.
- Read the document name and save status in the middle when space permits.
- Use Save for a local snapshot, or Share/Export for image output.
Expected result: You can distinguish a library save, an editable file download and a finished image export.
Share post image and Export post image open the same Export and share post dialog. They do not immediately send or download a file. Saving to the library is browser-local; the save status is not a cloud-sync indicator.
| Control | What it does | Where to find it |
|---|---|---|
| Document name | Identifies the working post; rename it in Canvas size and name. | Middle of the desktop top bar; hidden when space is very narrow. |
| Save status | Reports current-post saving; separate from a named library snapshot. | Beside the document name on desktop; hidden on mobile. |
| Design files | Download or import .kruti, share an editable file, or start a new post or sticker. | Top bar, beside kruti. |
| Undo | Reverse the most recent committed edit; dimmed when no undo is available. | Top bar, after Design files. |
| Redo | Reapply an undone edit; dimmed when no redo is available. | Top bar, beside Undo. |
| Generate a new background | Create new selected-background geometry; keep foreground text and photos. | Top bar, after Redo, on desktop and mobile. |
| Save current project | Explicitly keep or update the current project; autosave only protects the working draft. | Right side of the top bar. |
| Share post image | Open the image export/sharing dialog; prepare an image before native sharing. | Top bar, beside Save. |
| Export post image | Open the same dialog to choose format, resolution and Download artwork. | Far right of the top bar. |
Tool rail: identify every tool icon
Use the left rail on desktop or the bottom dock on mobile. Its order runs from Appearance through content tools, Layers, Pan, Canvas, Projects, Brand Assets and Guides. Generate stays in the top bar.
- Find the matching icon and name in the reference below.
- Open that tool to show its controls; for existing content, select the layer you want to edit.
- If the mobile dock does not show all tools, scroll it horizontally.
- Follow a linked how-to guide when you need the procedure rather than the icon name.
Expected result: You can find all eleven rail items, including the difference between project files, saved Projects and shared Brand Assets.
Design files in the top bar opens Projects and files. Projects in the rail opens explicitly saved work; Brand Assets opens shared fonts, logos, images and brand kits. Pan uses a hand icon and changes the drag mode. Generate changes a background, not the words in a text layer.
| Control | What it does | Where to find it |
|---|---|---|
| Appearance | Choose background layers, styles, colors, texture finishes, density, flow and blending. | First item in the tool rail. |
| Text and fonts | Add text or edit the selected text layer. | Tool rail, after Appearance. |
| Images | Edit normal placed images, or explicitly select images to create a collage. | Tool rail, after Text. |
| Cards and shapes | Add geometric foreground cards and edit their appearance. | Tool rail, after Photos. |
| Freehand drawing | Choose a brush and paint, then draw on the canvas. | Tool rail, after Cards. |
| Layers and selection | Find, select, hide or lock foreground layers. | Tool rail, after Drawing. |
| Pan canvas | Drag the viewport instead of moving an artwork layer. | Tool rail, after Layers. |
| Canvas size and name | Set dimensions and name, choose transparency or reset remembered defaults. | Tool rail, after Pan. |
| Projects | Save, rename, duplicate, reopen, insert, download or delete explicitly kept projects. | Tool rail, after Canvas. |
| Assets | Upload and preview fonts/images; use the pencil to rename and Manage brand kits for optional defaults. | Tool rail, after Projects. |
| Open guides | Open the getting-started guide in another tab. | Last item in the tool rail. |
Properties: actions, tabs, shuffle and Keep settings
The selected-layer actions appear above the property tabs. Tabs change with the layer type; a text example is shown below.
- Select an existing text layer on the canvas or in Layers.
- Find its name, Lock, Duplicate, layer-order arrows, Delete and Close in the first row.
- Use the tabs beneath that row to choose Typography, Shape, Fill, Outline, Shadow or Arrange.
- Find the wand for New look, same words and the separate shuffles beside individual settings.
Expected result: You can tell whether a control acts on the layer, changes a tab or randomizes just one setting.
A photo has Crop, Shape, Color, Border and Arrange tabs. A card has Shape, Fill, Outline, Shadow and Arrange. Drawing properties use Brush, Fill and Arrange. Text-specific controls are not missing when another kind of layer is selected; they are irrelevant to that selection.
Checked Keep settings are locks for New look, same words, not commands to randomize those choices. Lock layer is different: it protects the whole selected layer from editing. Arrange replaces the text appearance form, so the text wand is not shown in that tab.
| Control | What it does | Where to find it |
|---|---|---|
| Keep font / colors / text shape | Checked means preserve that choice during New look, same words; individual shuffles deliberately change their own setting. | Below the text wand. |
| Size and other numeric rows | A named value has a slider, number entry, optional unit and its own shuffle at the right. | Inside the relevant property tab. |
| Crop / Color / Border | Photo-specific controls for framing and image appearance. | Property tabs when an image is selected. |
| Brush | Stroke preset, width and paint for a drawing. | Drawing properties instead of text/font tabs. |
| Lock / Unlock layer | Prevent or allow edits to the selected layer. | Selected-layer action row, beside the layer name. |
| Duplicate layer | Add an independent copy of the selected foreground layer. | Selected-layer action row. |
| Bring layer forward | Move the layer one position toward the front. | Selected-layer action row, up arrow. |
| Send layer backward | Move the layer one position toward the back. | Selected-layer action row, down arrow. |
| Delete layer | Remove the selected foreground layer; use Undo to recover the edit. | Selected-layer action row, trash icon. |
| Close panel | Close properties without deleting the selected object. | Right end of the selected-layer action row. |
| Typography | Edit words, phrases, font, font size, alignment, direction and spacing in one tab. | First text-layer property tab. |
| Font family search | Compare inline specimens and select a font to apply it directly; only the chosen catalog font downloads. | Typography, below the text content; Assets opens beside it. |
| Canvas resize | Wrap text changes the frame and wrapping; Scale text changes frame and font size together. | Typography, below Font size. |
| Shape | Shape text, or choose the geometry of a selected card/photo frame. | Relevant layer property tabs. |
| Fill | Choose a solid, gradient or supported textured paint. | Text, card and drawing property tabs. |
| Outline | Set the solid-color edge and width of text or a card. | Text and card property tabs. |
| Shadow | Set a solid shadow color, blur and offsets. | Text and card property tabs. |
| Spacing and weight | Set weight, leading, word gap and letter gap. | Sliders icon beside the direction icons in Typography. |
| Arrange | Set frame position, dimensions, rotation and opacity. | Last property tab for a selected layer. |
| New look, same words | Vary text styling while respecting the checked Keep settings. | Top-right of text appearance controls, except Arrange. |
| Randomize a setting | Change only the adjacent paint, shape, brush or numeric value. | Beside the relevant control; numeric shuffle is at the right edge. |
Canvas: zoom percentage, plus, minus, Fit and Pan
At the bottom-right of the canvas, minus zooms out, plus zooms in, and Fit page restores the full page view. The percentage is a readout, not an export scale.
- Find the compact zoom group inside the canvas area.
- Use minus or plus and observe the percentage readout.
- Use Fit page to bring the whole page back into view.
- Choose the hand icon in the tool rail when you want to pan by dragging.
Expected result: The view changes without changing canvas dimensions, layer sizes or output resolution.
Fit page and Canvas size use the same maximize-style symbol in different locations. Fit is beside the zoom controls and changes the view. Canvas size and name is in the rail and changes document settings. The zoom percentage is not an editable size field.
| Control | What it does | Where to find it |
|---|---|---|
| Zoom percentage | Shows current viewport magnification, not output scale. | Between Zoom out and Zoom in. |
| Zoom out | Show more of the canvas without changing artwork size. | Bottom-right of the canvas, minus icon. |
| Zoom in | Inspect a smaller area more closely; percentage shows view magnification. | Bottom-right of the canvas, plus icon. |
| Fit page | Bring the entire page back into view. | Bottom-right of the canvas, after Zoom in. |
| Pan canvas | Move the view by dragging; two-finger touch gestures also pan. | Hand icon in the tool rail, not inside the zoom group. |
Design files: editable originals and new canvases
Press Design files in the top bar to open Projects and files. This contains project saving, .kruti download/import and New post/New sticker.
- Open the documents icon beside kruti to find Save project and Projects.
- Find Download .kruti, Share .kruti and the Import .kruti file picker.
- Find New post and New sticker below the file actions.
- For unsaved work, choose Save changes, Discard changes or Cancel before switching.
Expected result: You know where to manage editable documents without confusing them with image exports or library entries.
Download .kruti preserves layers and embedded assets. Import accepts a supported Kruti document, not a PNG, JPEG or SVG as a complete layered original. New sticker starts a transparent canvas; New post starts a normal post. Changed drafts require Save, Discard or Cancel; unchanged blank drafts can be replaced without adding project history.
| Control | What it does | Where to find it |
|---|---|---|
| Download .kruti | Keep a portable editable original, including embedded assets. | Design files dialog. |
| Share .kruti | Share the editable file using the device share sheet where supported. | Design files dialog. |
| Import .kruti | Select a validated Kruti document and confirm replacement of the current canvas. | File input in Design files. |
| New post | Start a new post after the replacement confirmation. | Design files dialog. |
| New sticker | Start a new transparent sticker after confirmation. | Design files dialog, below New post. |
| Save current and create new | Keep the current project, then create a blank canvas; failures leave the current work open. | New project confirmation. |
| Discard changes and create new | Discard the working draft without adding history; an existing explicit project save is kept. | New project confirmation. |
| Cancel new project | Return to the unchanged working canvas. | New project confirmation. |
Export: format, resolution, download and sharing
Open Share post image or Export post image in the top bar. In Export and share post, choose Format, optional Resolution, then Download artwork or prepare sharing.
- Open the top-bar Share or Export icon.
- Find PNG, JPEG, SVG and GIF in Format; select the format for your destination.
- For PNG/JPEG, choose Resolution; for GIF, set the total Duration in seconds. Check the output dimensions beneath it.
- Use Download artwork, or prepare the image and then open the device share sheet when supported.
Expected result: You can locate each export option and distinguish the preparation step from actually opening a sharing app.
The reference shows PNG at 1x for a square example. SVG hides the Resolution menu and can contain embedded raster layers; it is not a guarantee of outlined vector lettering. JPEG puts a white matte behind transparency. The prepared-image preview and Open device share sheet action appear only after preparation succeeds.
A dimmed sharing action may mean the browser does not support that kind of file sharing. Download remains the alternative. The close icon returns to the canvas; it does not delete or reset the design.
| Control | What it does | Where to find it |
|---|---|---|
| PNG / JPEG / SVG / GIF | Choose a still image, mixed vector/image output or layer-reveal animation. | Format group near the top of the export dialog. |
| Resolution: 1x / 2x / 3x | Multiply raster output dimensions; not available for SVG or GIF. | Below Format for PNG and JPEG. |
| Duration (seconds) | Divide a 2-30 second GIF loop equally between frames. | Below Format for GIF. |
| Output dimensions | Show the actual still-image or bounded GIF dimensions. | Beside Download artwork. |
| Prepared image preview | Shows the prepared revision and enables the next sharing action. | Appears after Prepare post image succeeds. |
| Download artwork | Download the chosen PNG, JPEG, SVG or timed GIF; this is not the editable .kruti file. | Export dialog, beside output dimensions. |
| Prepare post image | Prepare the current document revision for sharing where supported. | Export dialog, before an image is prepared. |
| Open device share sheet | Share the prepared image; preparation must be repeated after edits. | Export dialog, after the prepared preview appears. |
| Close dialog | Return to the editor without changing canvas content. | Upper-right corner of the export dialog. |
Mobile: where the same controls move
On a narrow screen, tools move to a horizontal bottom dock and properties opens above that dock, below the canvas. The top bar and canvas zoom controls remain available.
- Look along the bottom edge for the tool dock; swipe it sideways for offscreen items.
- Open a tool or select a layer to show the properties sheet above the dock.
- Drag the small handle at the top of that sheet to change how much room it occupies.
- Scroll property tabs sideways and use the panel close icon when you need more canvas space.
Expected result: You can find the same tools without expecting a permanent left sidebar on a phone.
This reference renders the actual workspace components at a narrow width. Some document-name and save-status text is hidden when space is tight, but this does not turn off saving. On the narrowest screens, the duplicate Share shortcut is hidden; Export still opens the same download and sharing dialog. Generate stays in the top bar. The bottom dock and tab row can contain more items than fit on screen.
Zoom remains at the bottom-right of the canvas area, above the properties sheet when it is open. The resize handle changes the sheet height, not the actual canvas dimensions.
| Area | Desktop | Mobile |
|---|---|---|
| Tool navigation | Left vertical rail | Bottom horizontal, scrollable dock |
| Properties | Panel beside the rail | Resizable sheet above the dock |
| Zoom group | Bottom-right of canvas | Bottom-right of remaining canvas area |
| Document/save text | Middle of top bar | Some text hidden at narrow widths |
| Files and export | Top bar | Top bar; dialogs fit the available screen |