MOSS-Image Layout Editor

MOSS-Image Layout Editor

Lets you draw a layout of text, object and character boxes in your browser and export a MOSS-Image prompt from it. For people who build MOSS-Image drafts by hand.

Made by ferry309 on Hugging Face. These notes are Mindket's, written from its Space page and README; the app's own files and license are on Hugging Face.

About

What it is: This is a visual editor for MOSS-Image draft prompts that runs in a web page. The official MOSS-Image repository includes compile_prompt.py, which converts a layout draft into a prompt. Until this editor, there was no visual tool for making that draft. Now you place the boxes on a canvas instead.

Who it suits: People who generate images with MOSS-Image and want to plan where text, objects and characters go. It also suits designers who want to trace an existing design as a starting point.

Industry | Who uses it | How they use it | Example
Design | Visual designers | Lay out text and objects before generating | Place a headline box and a character box on a canvas
Marketing | Content creators | Plan a poster or banner with exact wording | Type the exact text for each box
Software | Developers of image workflows | Produce the layout JSON by hand-free drawing | Export the JSON and feed it to their own workflow

If you do not use MOSS-Image, you can skip it.

Where to use it: The editor works in these places:

• A web browser: open the Space page on Hugging Face and use it there.
• Windows, macOS or Linux: download the files and open index.html in a browser.
• Your own MOSS-Image workflow, where you paste the prompt the editor gives you.

Use case | Who | What they get back
Build a layout draft | Designers | A layout JSON of the boxes you drew
Copy a prompt | Image makers | A prompt that matches what the official script gives
Trace a design | Designers | A picture behind the boxes to trace over

How to set it up: Using it online needs nothing. For a local copy you need a few things:

• Python with pip, to fetch the files
• The huggingface_hub package, which the first command installs
• A web browser

The steps download the Space and then open its main page by hand.

1. Install the Hugging Face package.
2. Download the Space into a folder called moss-image-layout-editor.
3. Move into that folder.
4. Open index.html in a web browser.

pip install -U huggingface_hub
hf download ferry309/moss-image-layout-editor --repo-type space --local-dir moss-image-layout-editor
cd moss-image-layout-editor

How to use it: Open the page, draw your boxes, fill in each item, then export the layout JSON and copy the prompt. The interface comes in English and Chinese, and four built-in examples give you a starting point.

Tool | What it does
Canvas boxes | Place text, object and character boxes, then move or resize them
Item fields | Set captions, exact text, meta tags and a palette for each box
Reference layer | Show an image under the boxes to trace, kept in your browser
Export | Gives the layout JSON and a copyable prompt

Example: You pick one of the built-in examples, move the boxes to fit your idea and change the exact text of one. Last, you take the copied prompt to your own MOSS-Image setup, where the picture is made.

For newcomers and experts: If you are new to this, open the page, choose a built-in example and drag one box around. Nothing is uploaded, so you can play freely. Export only when the layout looks right.

If you know the field, the editor aims to match what compile_prompt.py gives for the same layout, so the prompt works with the official project. The page generates nothing itself. It is a front end for the draft, and the reference image is never part of the prompt.

You draw boxes on a canvas
You fill in text, captions, tags and palette
You export the layout JSON
You copy the prompt into MOSS-Image

Good to know: The editor builds the draft and the prompt only. It does not generate images.

• License: apache-2, as the Space lists it.
• Cost to run: none named. It needs no generation service, upload or account.
• Data it reaches: nothing leaves your browser. A reference image you add stays in the browser.
• Not for: generating pictures. You paste the prompt into your own MOSS-Image workflow for that.

On Hugging Face, 13 November 2026

• Likes: 1
• Built with: static
• License: apache-2.0

Links

• Space: https://huggingface.co/spaces/ferry309/moss-image-layout-editor
• Files: https://huggingface.co/spaces/ferry309/moss-image-layout-editor/tree/main

Try it

Open the Space in your browser, or copy it to your own Hugging Face account from its page. Nothing in this kit runs by itself.