XVI / 十六开

A privacy-first Chinese longform typesetting studio that turns finished text into beautifully composed, export-ready images.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for XVI / 十六开

Inspiration

Chinese longform writers often have to choose between generic screenshot tools and professional layout software that interrupts the writing flow. XVI / 十六开 began as a personal tool for turning finished Chinese text into images that feel intentionally typeset rather than mechanically captured.

What it does

XVI is a privacy-first, browser-based longform typesetting studio. Writers can paste a complete article, generate a composed long image, and then refine typography, spacing, colors, templates, chapter labels, and inline emphasis.

It supports:

  • rich-text styles including bold, italic, underline, and strikethrough
  • Simplified Chinese and Traditional Chinese conversion for Hong Kong and Taiwan conventions
  • four editorial layout structures and sixteen named color systems
  • direct editing on the generated canvas preview
  • local font import without uploading font files
  • PNG and JPG export in three clearly labeled resolutions
  • desktop workflow and foundational mobile adaptation

The article, imported fonts, draft, and generated image stay in the local browser. Only feedback explicitly submitted through the feedback form is sent to Netlify Forms.

How we built it

The project is a static HTML, CSS, and JavaScript application with no backend and no build step. A contenteditable editor preserves simplified inline formatting. On generation, the article is normalized into paragraphs and styled text runs. The preview renders from this generated document snapshot instead of continuously reflowing while the user writes.

Image export is not a screenshot of the interface. The Canvas exporter rebuilds the composition from the same typography settings and rich-text runs, including Chinese line-breaking rules that avoid common punctuation at inappropriate line starts and endings.

OpenCC runs locally for regional Chinese conversion. Drafts use localStorage, local fonts use the browser FontFace API, and Netlify provides static deployment plus an intentionally separate feedback form.

Codex and GPT-5.6

During OpenAI Build Week, Codex with GPT-5.6 was used as an iterative product and engineering partner. It helped translate detailed visual critique into implementation changes, debug rich-text parity between the editor, preview, and Canvas export, design regional Chinese conversion behavior, reorganize mobile interaction, audit privacy boundaries, and maintain versioned documentation.

The key decisions remained human-led: input should be completed before composition, the writing itself should never be uploaded, visual systems should be named and curated rather than randomly generated, and layout templates must change structure instead of merely recoloring the same page.

What changed during Build Week

XVI existed before the event as an early working prototype. Work completed after July 13 focused on the submission-relevant expansion:

  • a new editorial workspace and root deployment
  • four layout structures and sixteen curated special color systems
  • direct on-canvas editing for headings, body text, chapter labels, size, color, and inline styles
  • Simplified Chinese, Traditional Chinese (Hong Kong), and Traditional Chinese (Taiwan) conversion
  • local-only font import and clearer privacy boundaries
  • mobile input and preview adaptation
  • clearer export formats, resolutions, and final pixel widths
  • Netlify feedback flow, documentation, deployment recovery, and version history

The dated Git history and changelog distinguish this Build Week work from the earlier prototype.

Challenges

The hardest problem was keeping three representations consistent: the editable rich text, the DOM preview, and the Canvas export. A style that appeared correctly in the editor initially disappeared from the exported image. Solving that required a shared run-based text model and matching rendering behavior across both preview and export.

Chinese typography added another layer: line breaking, punctuation placement, paragraph indentation, regional character conversion, and fonts all affect readability. Mobile adaptation also required changing the workflow rather than simply shrinking a desktop layout.

What's next

The next milestone is V1: stronger mobile reliability, automatic multi-image slicing for social platforms, more structurally distinct editorial templates, cross-browser export testing, and a complete audit of bundled and externally referenced font licensing.

Built With

Share this project:

Updates