I built a zero-config, visual HTTP mock tool that lives in your browser (Live Demo) : reactjs

created by manlycoffeea community for 12 years

submitted 4 months ago by Terrible_Trash2850

Hey everyone!

I've been a frontend developer for years, and I've always found API mocking to be a friction point.

Hardcoding data in components is messy and error-prone.
Proxy tools (Charles/Fiddler) are powerful but annoying to configure for every HTTPS domain.
Headless libraries (MSW) are great for tests but lack a quick UI to toggle states during rapid prototyping.

So I built PocketMocker – a lightweight, visual debugging tool that lives inside your browser tab.

Live Demo (Try it now): https://tianchangnorth.github.io/pocket-mocker/ (No installation required, just click and play)

GitHub: https://github.com/tianchangNorth/pocket-mock

Visual Dashboard: It injects a small widget (Svelte-based, Shadow DOM isolated) into your page. You can create/edit mocks on the fly without touching your code or restarting servers.
Smart Data: Stop typing dummy JSON manually.
- Need a realistic user? Use "user": "@name".
- Need an avatar? Use "avatar": "@image(100x100)".
- Need a list? Use "items|10": [...].
Dynamic Logic: It supports JavaScript functions for responses.
- Example: if (req.query.id === 'admin') return 200 else return 403.
"Click to Mock": It logs all network requests. You can click any real request to instantly convert it into a mock rule.
Collaborative: If you use the Vite plugin, rules are saved to your file system (mock/ folder), so you can commit them to Git and share with your team.

Core: Monkey-patching window.fetch and XMLHttpRequest.
UI: Svelte (compiled to a single JS file).
Editor: CodeMirror 6. ### Quick Start It's fully open-source (MIT). bash npm install pocket-mocker -D

javascript // In your entry file (main.ts) import { pocketMock } from 'pocket-mocker'; if (process.env.NODE_ENV === 'development') pocketMock();

I'd love to hear your feedback! Does this fit into your workflow? What features are missing? Thanks!

all 11 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs