This text editor converts Chinese characters to Jyutping (粵拼) and Yale romanization (耶魯) instantly as you type.

Your workspace is organized in four levels: Projects → Folders → Documents → Pages. Projects hold your documents. Folders help you organize those documents. Each document contains pages.

Sidebar (top of left panel)

	Recent Projects	Lists every project saved in this browser, with the time of its last edit and last backup. From here you can open a project in this tab or in a new tab, or delete it.
	New Project	Starts a fresh, empty project. You can choose to start the new project in this tab or a new tab. Back up your current project first if you want to keep it.
	Open Project	Loads a project from a .cro file you backed up before. You can choose to open the project in this tab or a new tab.
	Backup Project	Saves your whole project (folders, documents, and pages) as a .cro file on your computer.
	User Manual	Opens this guide.
	Collapse sidebar	Hides the sidebar to give the editor more space.

Project area (below the divider)

	Project name	Double-click to rename your project.
	Add a folder	Creates a new folder to group documents.
	Add a document	Creates a new document.
	Document tree	Click a document to open it. Double-click to rename your document. When you hover over the document name, you'll see buttons for duplicating or deleting the document.

Page tabs bar (top of editor)

	Show sidebar	Brings the sidebar back when it is hidden.
	Scroll left / right	Scrolls through page tabs.
	Add page	Adds a new page to the current document.
	Page tabs	Click to switch pages. Double-click to rename your page. When you hover over the page name, you'll see buttons for duplicating or deleting the page.

Toolbar

The toolbar is divided into small groups of buttons.

Undo / Redo

	Undo (Ctrl+Z)	Steps back one change.
	Redo (Ctrl+Y)	Steps forward one change.

Paragraph & headings

	Paragraph	Turns the line into a normal paragraph.
	H1 / H2 / H3	Turns the line into a large, medium, or small heading.

Font size

	− / +	Make text smaller or larger.
18	Number button	Click it to pick a font size from a list.

Text styles

	Bold	Makes the selected text bold.
	Italic	Makes the selected text italic.
	Underline	Underlines the selected text.
	Strikethrough	Draws a line through the selected text.
	Clear formatting	Removes all inline formatting (bold, italic, underline, strikethrough, font size, color) from the selected text, restoring it to the default style.

Color

Color swatches

Click a swatch to change the text color of the selection.

Alignment

	Align left	Aligns text to the left.
	Align center	Centers the text.
	Align right	Aligns text to the right.
	Justify	Spreads text evenly across the line.

Lists, quotes, tables

	Bulleted list	Turns selected lines into a bullet list.
	Numbered list	Turns selected lines into a numbered list.
	Block quote	Marks the selected text as a quote.
	Insert table	Click and pick a grid size to insert a table. Right‑click a cell to insert or delete rows or columns.
	Parallel paragraph	Splits a paragraph into two columns: characters on the left, romanization on the right. You can only edit text in the left column. Hover over a character to change its romanization.

Romanization

粵	Romanization system	Opens a panel with romanization settings. Choose a system: 粵 Jyutping, 粵 Jyutping (Tone Marks), or 耶 Yale. The panel also lets you adjust the romanization size, toggle bold or italic style, and pick a color for the romanization.
	Display mode	Switches what is visible in the editor. Options: Character + Romanization (default), Character only, or Romanization only. Enable Hover to show romanization when hidden to reveal a character's romanization by hovering over the character while romanization is hidden.

Export

All export options are accessed from the Export dropdown button in the toolbar.

	Copy image	Copies the current page as an image to your clipboard.
	Copy image (transparent)	Same as Copy image, but the background is transparent.
	Download PNG	Saves the current page as a PNG image file.
	Download PNG (transparent)	Same as Download PNG, but the background is transparent.
	Download PDF	Saves the current page as a .pdf file.
	Download Word (.docx)	Saves the current page as a .docx file compatible with Microsoft Word.
	Download HTML	Saves the current page as a .html file that you can open in any browser.
	Print	Opens your system's print dialog for printing.

Editing Romanization

Click the romanization to edit it. Choose a pronunciation or type your own.

Cantonese Romanization Input Method

The editor includes a built-in Cantonese romanization input method that lets you type Chinese characters by entering their romanization. Click the button at the bottom-right to enable it.

	Settings	Opens the settings panel. From here you can enable or disable the input method, switch the romanization system between Jyutping and Yale, control tone filtering (filter candidates only when a tone number is typed, always, or never), set the number of candidates per page, enable fuzzy matching (e.g. n ↔ l, ng ↔ ∅), and clear the typing history.
中	Toggle input mode	Switches between 中 Chinese and A English input modes. You can also press F2 switch between modes. This button is only visible when the input method is enabled.

How to type: With Chinese input mode active, type the romanization of a character (e.g. nei). A candidate panel will appear. Press Space to select the highlighted candidate or a number key to select the corresponding candidate, - / = to go to the previous or next page of candidates, Esc to cancel.

Credits

This editor is built on the following projects and data.

• Lexical — Text editor framework. Licensed under the MIT License. Source: github.com/facebook/lexical.
• to-jyutping — Jyutping conversion library used to suggest romanization candidates. Licensed under the BSD 2-Clause License. Source: github.com/CanCLID/to-jyutping.
• rime-cantonese — Cantonese pronunciation dictionary used to power the input method. Licensed under CC BY 4.0. Source: github.com/rime/rime-cantonese.
• Lucide — Icon set used throughout the interface. Licensed under the ISC License. Source: github.com/lucide-icons/lucide.

Contact Us

Have a suggestion or found a bug? We'd love to hear from you!

• Instagram: instagram.com/opencant
• Facebook: facebook.com/opencant
• Contact Form: forms.gle/b2HV4aNE6gyKCqWY9