moss-image.com
Sign inGenerate
  1. moss-image.com
  2. Layout editor

Free tool · runs in your browser

MOSS-Image layout editor

Draw where each line of text and each object should go. The editor writes the bounding-box JSON MOSS-Image expects — centered pixel coordinates in yxyx order — so you never compute a box by hand.

Give every element a place.

Drag text and objects into place, then send the layout to the generator. The canvas previews your input, not the output.

Layout editorLoading draft
Elements2/12
Selected element
Layout preview1024 × 1024

Drag to move. Arrow keys move 1 px; Shift + arrow moves 10 px. Use the fields to resize.

This is your input layout, not a generated image. The model may interpret text, objects and positions differently.

Ready to give it a try?

Export the layout as a MOSS-Image JSON prompt.

The generator renders square, portrait (3:4) and landscape (4:3) layouts, scaling your boxes to its canvas. Your canvas: 1024 × 1024.

Send layout to generator
Inspect the JSON prompt
{
  "summary": {
    "meta": [
      "poster"
    ],
    "canvas": "single",
    "caption": "A clean blue and white design exhibition poster with a bold Chinese title and a blue abstract sculpture on a white background."
  },
  "items": [
    {
      "label": "text",
      "caption": "Large dark-blue Chinese title at the top.",
      "text": "字有位置",
      "bbox": [
        -416,
        -416,
        -256,
        416
      ]
    },
    {
      "label": "object",
      "caption": "An abstract cobalt blue geometric sculpture in the center.",
      "bbox": [
        -160,
        -320,
        352,
        320
      ]
    }
  ],
  "bbox_coord_space": "abs_centralized",
  "bbox_format": "yxyx"
}

Your draft stays in this browser. No account or upload needed.

Three layouts. Three real outputs.

Original Base outputs from our inputs in the official Space. Inspect each prompt and generation record, then edit the layout yourself.

Tested yellow cafe poster with 慢一点, a coffee cup and TAKE A BREAK.

Slow coffee

A café poster with a headline, central product and a small English line.

Both requested lines are readable. The Chinese title extends beyond the requested box height; placement is approximate.

Download promptGeneration record
Use this layout
Tested pink music poster with 周末开场, WEEKEND SESSIONS and a record player.

Weekend opening

An event announcement with a bold title and a wide image area.

Both requested headlines are readable. The model reinterpreted text height and styling; the input boxes are not hard boundaries.

Download promptGeneration record
Use this layout

All three samples use Base, 1024 × 1024, 50 steps, seed 42, CFG 3 and shift 5. They are unretouched single runs, not an accuracy benchmark. The editor shows the requested layout, not the output pixels.

How to use it

  1. Pick a template or start from the square canvas, and describe the whole scene in one sentence.
  2. Add a text box for every line you want rendered and type the exact words. Add object boxes for the main subjects.
  3. Drag and resize. Arrow keys nudge by 1 px; Shift + arrow by 10 px.
  4. Send the layout to the generator, or copy the JSON into ComfyUI, the API or the official demo with the same width and height.

Read the layout JSON guide

Questions

Is the layout editor free?

Yes. Editing, saving drafts and exporting JSON are free and need no account; drafts are stored only in your browser. Generating an image on this site uses credits.

Will the model follow my boxes exactly?

Boxes are strong guidance, not hard walls. In our tests text landed close to its box but sometimes ran taller; OpenMOSS describes layout control as experimental. Keep text boxes generous and avoid overlapping text.

Can I use the exported JSON in ComfyUI?

Yes. Paste it into the positive prompt with the prompt enhancer turned off and set the same width and height as the editor canvas. ComfyUI also has its own MOSS-Image Layout Prompt node for drawing boxes.