← Back to home

Desktop App • Electron

Screen Recorder + Browser Automation

I built a desktop app that records browser steps and desktop video. It can also generate a step-by-step tutorial (ScribeHow style) with screenshots.

ElectronPlaywrightPostgreSQLMediaRecorder

Demo Video

Current demo is hosted on YouTube.

Link: https://youtu.be/gZxxsDQiaBI

What this app can do

1) Browser recording (automation)

  • • Open a website inside the app.
  • • Click and type like a normal user.
  • • Record each step and capture screenshots while recording.

2) Auto tutorial (screenshots + steps)

  • • Generate a step-by-step tutorial (ScribeHow style).
  • • Save tutorial HTML + screenshots.
  • • Store tutorial data in PostgreSQL.

3) Export + replay

  • • Export a flow as a Playwright script.
  • • Replay saved flows later.

4) Desktop recording (video)

  • • Record full screen, a window, or a custom selected area.
  • • Minimize the app during recording and use a floating stop button.

How it works (simple explanation)

  • • Electron provides the desktop shell.
  • • Playwright records and replays browser steps.
  • • Screenshots are captured per step and stored for tutorials.
  • • Desktop video is recorded via MediaRecorder and saved as WebM.
  • • Custom-area recording crops the capture to a selected rectangle.
  • • PostgreSQL stores flows, steps, and tutorial metadata.

Contact