📤 Export to WebM instantly, or to MP4 transcoded in the browser via ffmpeg.wasm. No server, no upload, no watermark.

The signature feature: highlight match-cut

The match cut is built around one idea: keep the highlighted phrase fixed while everything else changes.

• Anchor every frame's <highlight> to the same on-screen position and size, so successive pages snap together on the word.
• Zoom match scales each page so the highlight is always the same width, for a seamless punch between very different layouts.
• Grow highlight reveals the marker like a progress bar across the entire sequence, filling from 0% on the first frame to 100% on the last.
• Cut SFX + background music, each with its own volume, fired precisely on every switch.
• Aspect ratios for every platform: 9:16 Reels/Shorts, 4:5, 1:1, and 16:9.
• Hold-per-frame tunable from a punchy 0.05s up to 2.5s.

Tech stack

Quick start

git clone https://github.com/canaryGrapher/newsx.git
cd newsx
npm install
npm run dev

Open http://localhost:3000 and you're composing.

npm run build   # production build
npm run start   # serve the build
npm run lint    # lint

Configuration

NewsX runs with zero configuration. Analytics are optional: copy .env.example to .env.local and fill in the keys you want.

NEXT_PUBLIC_GA_ID=        # Google Analytics 4 measurement ID (optional)
NEXT_PUBLIC_CLARITY_ID=   # Microsoft Clarity project ID (optional)

Leave them blank and no analytics load.

How it works

NewsX is almost entirely a client app. A page is rendered as real DOM, captured to a canvas with html2canvas, and the position and size of its <highlight> element are measured in canvas pixels. For the video, each captured page is drawn onto an output canvas, transformed so its highlight lands on the shared anchor, and the canvas stream is recorded with MediaRecorder. MP4 export loads a single-thread ffmpeg.wasm core from a CDN only the first time you ask for it, so the rest of the app stays light and no special server headers are needed. It deploys as a static-friendly Next.js app and works on any plain host.

Bulk mode

Have a spreadsheet of stories? Upload a CSV with a highlight column and NewsX turns every eligible row into a page, ready to drop straight into the Match Cut Studio.

Roadmap

• More paper themes and editable type scales
• Per-frame highlight color overrides
• Audio waveform trimming for the background track
• Shareable project links
• Template gallery

Ideas and pull requests welcome.

Contributing

Contributions of any size are appreciated. Open an issue to discuss a change, or send a pull request directly for small fixes. If NewsX saved you some editing time, a ⭐ helps more people find it.

License

Released under the MIT License. Build on it, ship with it, make something great.

If NewsX is useful to you, star the repo and follow along, more is coming.