Manga Maker (YAML / JSON)

You can write the script by hand, but you can also hand the spec below to an AI together with the plot, characters and lines in plain words, and it returns YAML that follows this spec. Paste it into the box above and it renders.

You write manga scripts in a YAML format called "Manga Spec v1".
Output only YAML in this format (no explanation, no code fences).

■ Overall shape (top-level keys)
version: 1
page:        # the whole page (px)
  width: 1200
  height: 1700
  background: "#ffffff"
  margin: 48       # outer margin
  gutter: 24       # gap between panels
  order: ltr       # reading order of panels. ltr = left to right, rtl = right to left (Japanese manga; the default)
images:      # optional names for images. Value is a URL or the name of an uploaded file
  hero: https://example.com/a.jpg
layout:      # panel grid. rows lists, top to bottom, either "number of panels in the row" or "width ratios of its panels"
  rows: [2, 1, [1, 2]]     # row 1 has 2 panels, row 2 has 1, row 3 has 2 panels with widths 1:2 (ratios follow reading order)
  rowHeights: [1, 1.4, 1]  # height ratios of the rows (optional; equal when omitted)
panels:      # array of panels. They fill the layout cells in reading order
  - image: hero            # image: name / URL / uploaded file name / {src: …, fit: …}
    bubbles:               # speech bubbles
      - text: "Morning!\nNice weather today"
        x: 70              # centre position (% of the panel)
        y: 25
        tail: [40, 70]     # tip of the tail (% of the panel); point it at the speaker's mouth
    captions:              # narration (white text on a black box)
      - text: The next morning
        pos: top-left
    sfx:                   # sound effects (large outlined text)
      - text: BOOM
        x: 60
        y: 70
        rotate: -12

■ Panel (each element of panels)
image       image. A string (URL / name in images / uploaded file name) or the object below
  src       the image (required)
  fit       cover (fill the panel; default) / contain (fit whole image) / fill (stretch) / none (natural size)
  scale     magnification (default 1). cover with 1.3 gives a closer crop
  x, y      focal point to keep (%, default 50). With cover, x: 0 keeps the left edge, 100 the right edge
  offsetX, offsetY   nudge in px
  flipX, flipY       true to mirror horizontally / vertically
  opacity   0-1
  filter    CSS filter (grayscale(1) / sepia(0.6) / contrast(1.3) …)
  rotate    degrees
background  panel background colour (default #ffffff)
border      frame. {width: 5, color: "#000"}, a number (width), or false (no frame)
radius      corner radius (px)
x, y, w, h  when all four are given, the panel ignores the grid and is placed freely in % of the page's inner area
z           stacking order (larger is in front)
bubbles / captions / sfx   arrays, see below

■ Speech bubble (each element of bubbles). A bare string is taken as text
text        dialogue (required). Line breaks with \n or a YAML multi-line string
x, y        centre position (% of the panel, default 50)
w, h        size (% of the panel). Omitted: sized automatically from the text
shape       round (ellipse; default) / rect (rounded box) / burst (jagged, shouting) / thought (bumpy, inner voice) / cloud / none (no outline)
tail        [x, y] (tip in % of the panel) / a direction name (bottom-left, top, right …) / none (default)
            thought bubbles automatically get a trail of small circles instead
vertical    true (vertical text) / false (horizontal) / auto (default: vertical when the text contains Japanese)
font        {size: 28, family: "…", weight: 700, style: normal, color: "#000"}
fill, stroke, strokeWidth   fill colour, outline colour and width (defaults white / black / 3)
padding     space between text and outline (px, default 14)
lineHeight  line spacing (ratio, default 1.35)
align       left / center / right
maxWidth, maxHeight   upper bound for automatic sizing (% of the panel, defaults 46 / 60)
rotate      degrees
opacity     0-1
autoFit     true (default) shrinks the text to fit inside w / h
keepInside  true (default) pushes a bubble that would stick out back inside the panel

■ Caption (each element of captions)
text (required), pos (top-left / top / top-right / left / center / right / bottom-left / bottom / bottom-right),
x, y (top-left corner in %; overrides pos), w (%), font, color, fill (default #000), stroke, strokeWidth, padding, lineHeight, align, maxWidth, rotate, opacity

■ Sound effect (each element of sfx)
text (required), x, y (centre in %, default 50), size (px, default 90), rotate (default -12), color (default black),
stroke (outline colour, default white), strokeWidth (default 10), font (family / weight / style), letterSpacing, opacity, vertical

■ Changing defaults in one place (optional)
defaults:
  panel:   {border: {width: 6}, background: "#fff"}
  bubble:  {font: {size: 30}, vertical: false, tail: bottom-left}
  caption: {fill: "#000", font: {size: 24, color: "#fff"}}
  sfx:     {size: 100, color: "#d00"}
  image:   {fit: cover, filter: grayscale(1)}

■ Several pages (optional)
pages:
  - layout: {rows: [2, 1]}
    panels: [ … ]
  - layout: {rows: [1, 1]}
    panels: [ … ]

■ Rules
- The number of panels must not exceed the number of layout cells (freely placed panels do not count).
- Percentages normally run 0-100. Bubble x, y are the centre; caption x, y are the top-left corner.
- Keep each bubble to about 30 characters. Split long lines into several bubbles.
- Point the tail at the speaker's mouth. If the speaker is visible in the image, match that position.
- A panel without an image may use a background colour plus captions or sfx to describe the situation.
- Colours are #rrggbb or colour names. Unknown keys are ignored (mind the spelling).

■ Example (4-panel strip, English, left to right)
version: 1
page: {width: 800, height: 2000, margin: 40, gutter: 20, order: ltr}
layout: {rows: [1, 1, 1, 1]}
panels:
  - background: "#e8f0fe"
    captions: [{text: "1", pos: top-left}]
    bubbles: [{text: "Let's make a comic today", x: 40, y: 40, tail: [70, 85]}]
  - background: "#fff3e0"
    captions: [{text: "2", pos: top-left}]
    bubbles: [{text: "But I can't draw…", x: 60, y: 45, shape: thought, tail: [25, 85]}]
  - background: "#fce4ec"
    captions: [{text: "3", pos: top-left}]
    bubbles: [{text: "Photos plus\nspeech bubbles\nwould do!", x: 40, y: 40, shape: burst, tail: [70, 85]}]
    sfx: [{text: "DING", x: 78, y: 30, size: 60}]
  - background: "#e8f5e9"
    captions: [{text: "4", pos: top-left}]
    bubbles: [{text: "Done.", x: 50, y: 45, shape: rect}]

Now write the following in this YAML format.
Content: