kary

kary is an in-browser karaoke song editor — add music, edit lyrics and styling, set timing, and export to a plain video file. It runs entirely in the browser, no installation required.*

Try it out at kary.pages.dev. A modern browser with good WebAssembly support is recommended for in-browser rendering.

[!IMPORTANT]

kary is still in early development, so there may be bugs and missing features. Please report any issues you encounter.

Layout algorithm

The editor uses a slot and batch-based layout algorithm to determine when to determine lyrics on the screen.

• There are a set number of "slots" on the screen (determined by the "max lines" setting).
• Each line of lyrics occupies one slot. Lines will be drawn into the slots in order, starting from the top and cycling back to the top after reaching the bottom.
• Lines are grouped into "batches" of a set number of lines (determined by the "batch size" setting). Lines in the same batch will drawn and cleared together.
• Each batch is drawn a set number of seconds early ("predraw") and cleared a set number of seconds after the last line in the batch finishes ("postdraw").
• New batches are drawn into free slots. Previous batches that have finished but haven't been cleared yet will be forced to clear early to draw the new batch if required.

Workflow

1. Create a project

Create a new project with a title and artist name. Then, upload media files: audio, video, and/or background images. Files are stored locally in OPFS (Origin Private File System) so nothing leaves your browser.

Using separate audio and video files is encouraged. This allows for more flexible editing and allows compensating for audio latency on your system.

2. Edit lyrics

Write lyrics in the built-in editor, which supports commands, highlighting, and inline diagnostics.

Each line of text entererd becomes a lyric line in the video. Blank lines, comments, and commands are not displayed during playback. In general, you can write anything in the editor, but the characters [, ], \, and / are reserved for commands and escaping. You can display these characters by escaping them with a backslash (e.g. \[, \\, \/).

You can use the following commands interspersed with your lyrics:

// comment — add a comment

// this is a comment

Comments are ignored by the parser, but they can be used to add notes to your lyrics.

[Verse 1], [Chorus], etc. — add a named section

[Section Name]

Section names must start with an uppercase letter but are otherwise arbitrary and can be used to organize your lyrics. They are not displayed during playback, but they can help you navigate your lyrics while editing.

Section names also create batch breaks in the timeline, which control how lyrics are batched on screen.

[break] — add a full break

[break]
[br] // shorthand

Adds a full break in the overlay, which forces the entire overlay to clear before drawing any other lines. Good for resetting the overlay during long pauses.

[batchbreak] — add a batch break

[batchbreak]
[bbr] // shorthand

Adds a batch break, which forces next lines to be drawn in a new batch. If the current batch isn't full, it will be padded with blank lines. Good for resetting batch alignment or creating a visual break without a full clear.

Batch breaks are automatically added at section breaks, but you can use this command to add batch breaks within sections if needed.

3. Configure style and overlay

The editor's Settings panel lets you configure:

Overlay settings:

• Line count: max number of lines displayed at once
• Batch size: number of lines to show/hide together during playback
• Predraw: how long to display lines before their set time (in seconds)
• Postdraw: how long to display lines after they're finished (in seconds)

Style settings:

• Font family and font weight
  • You can use any font available on your system. Download and install new fonts on your system to use them in the editor.
• Font size (in pixels, rendered at 1920×1080)
• Active text color and inactive text color (for upcoming/unsung lines)
• Outline width and outline color
• Text alignment (left, center, right)
• Vertical position (top, middle, bottom)
• Line spacing and letter spacing (in pixels)
• Padding from the canvas edge (in pixels)
• Fade duration for line fade-in/out (in seconds, 0 = instant)

All changes are reflected in real time in the preview panel.

4. Set timing

First, calibrate your audio offset using the calibration dialog (in the settings panel). This compensates for any latency in your audio output so that the timings you set align correctly with the music.

Then, switch to the timing panel to add timing info. Choose between two timing modes:

• Line mode: set a single timestamp/time range for each line. This is simplest but doesn't allow for precise word-level timing.

  To set line timestamps, click on a line, play the song, and press X when the line should start and C when it should end. Starting the next line will also automatically end the previous line if it hasn't been ended yet.

  In the video, the line will be filled from left to right over the duration between the start and end timestamps. Use the timeline editor to adjust timestamps visually if needed.

• Word mode: set individual timestamps/time ranges for each word. This allows for precise karaoke-style timing but requires more effort to set up.

  To set word timestamps, click on a line to focus it, play the song, and press , to set the start of a word and . to set the end of a word. Starting the next word will also automatically end the previous word if it hasn't been ended yet. Advancing past the end of the current line will also automatically move to the next line.

  Words will be filled in one by one according to their timestamps during playback. Use the timeline editor to adjust timestamps visually if needed.

To move around without setting timing marks, use the arrow keys (Up/Down to move lines, Left/Right to move words.)

5. Review and fine-tune

The bottom timeline shows playback controls (play, pause, seek, playback rate) and timing visualization. Use it and the real-time preview to review the video and make sure the timing and styling look good. Adjust settings, lyrics, and timing as needed.

Any layout issues (e.g. overflowing text, problematic timing) will be shown in the lyric editor and problems panel. Fix any issues to ensure the best results in the final video.

6. Export to video

When you're happy with the song, export it to a video file from the menu. This renders the song with the configured audio, lyrics, and styling into a plain video file that can be shared and played on any device.

Caveat: in-browser rendering is slow

Due to web platform limitations, the web-based renderer is quite slow, so exporting can take a long time. For better performance, you can download a Rust CLI tool that does the rendering locally on your machine. It yields the same output as the web renderer, just much faster and in better quality.

A download link is available in the web app, or you can build it from source (see native-renderer/README.md for more info).

Save and resume

Projects auto-save to OPFS as you work. You can safely close the tab and come back later to continue editing.

If you'd like to save a backup of your project or move it to another device, you can it as a .kary project file, which is a zip archive containing your media files and project data. You can import a .kary file back into the editor to resume work on it.

Caveats and limitations

• The web-based renderer is slow, so exporting can take a long time. Use the native renderer for better performance.
• The editor is fixed to only 1920x1080 output for now.
• Support for lyric text other than Latin characters may be spotty, especially for complex scripts.
• Word-level timing is based on whitespace separation, so it doesn't work well for languages that don't use spaces between words (e.g. Chinese, Japanese).
• Most parameters are fixed for the entire song, so you can't have different styles or settings for different sections of the song.

Contributing

Contributions are welcome! If you'd like to contribute, please open an issue or submit a pull request.

License

kary is licensed under the GNU General Public License v3.0. See LICENSE for more details.