Image layout
Click any image for the floating toolbar: four width presets, three alignments, plus delete. Stored as inline HTML so layout survives export and the public viewer.
Click any image in the editor and a small floating toolbar appears just above it. Two groups of choices plus a delete button — that’s the whole control surface.
The bamboo grove at Arashiyama is best at dawn.
Width
Four presets, no custom values:
| Preset | What it does |
|---|---|
| 25% | Image renders at 25% of the editor’s body width |
| 50% | 50% of body width — a good “comfortable inline” size |
| 75% | 75% of body width |
| Full | Width attribute is unset — image renders at its natural size, capped at 100% of body width |
Width is stored as the standard HTML width attribute (so width="50%" for the presets, or no width attribute at all for Full).
There’s no drag-resize handle and no pixel width input — the four presets cover the common cases and keep the source clean.
Alignment
Four options:
| Option | Effect |
|---|---|
| Left | Image floats left in the body column |
| Center | Block-level center (single image takes its own line, centered) |
| Right | Image floats right |
| None | No alignment class — inline image, default flow |
Alignment is stored two ways on the rendered HTML so it round-trips reliably:
- As a CSS class:
class="img-align-left"/img-align-center/img-align-right - As a
data-alignattribute:data-align="center"
The data attribute is the canonical source on parse, with the class as a fallback for older docs.
Delete
The trash icon on the right of the toolbar removes the image node entirely. Same effect as selecting the image and pressing Delete / Backspace.
What gets saved
A plain image with no width or alignment set serializes back as plain Markdown:
The moment you set width or alignment, the serializer switches to inline HTML so the attributes survive:
<img src="https://r2.sweetdocs.app/u/abc123" alt="alt text" width="50%" class="img-align-center" data-align="center" />This is a key design choice: standard Markdown can’t carry layout info, but every Markdown spec allows inline HTML. By emitting HTML only when needed, the source stays clean for plain images and only gets verbose when you’ve made a layout choice.
Where layout survives
| Destination | Width? | Alignment? |
|---|---|---|
| Save + reload in sweetdocs | Yes | Yes |
Public link viewer (marked + DOMPurify) | Yes | Yes |
Markdown export (.md) | Yes (as inline HTML) | Yes (as inline HTML) |
Word export (.docx) | Yes | Yes |
| PDF export | Yes | Yes |
| Copy-paste into another Markdown tool | Yes if the tool renders inline HTML; image-only otherwise |
For destinations that strip HTML, you’ll get the image but at its natural size and flow — the alt text is preserved either way.
Tips
- Stack two images side by side: set both to 50% width and Left align. They’ll wrap naturally next to each other.
- Big screenshot with body wrapping around it: 50% width, Right alignment. Text flows around the left side.
- Centered hero image: Full width, Center alignment.
- Tiny icon inline with text: 25% width, None alignment, then write your sentence right after the image.
What’s not available
| Missing | Notes |
|---|---|
| Custom pixel widths (e.g., 320 px) | Only the 4 presets are exposed in the toolbar |
| Drag-handle resize on the image | Not in v1 |
| Caption / figcaption | Not in v1 — alt text is the description |
| Rotate / crop / filters | The image is uploaded as-is; edit in an external tool first |
| Border / shadow / corner radius styling | Theme-controlled, not per-image |
| Click-to-zoom (lightbox) in the editor | Not in v1; the public-link viewer has it |