Explore docs »

Go to the website · Suggest a feature · Report a bug

Table of Contents

1. Quick Demo
2. About the Project
   • Features
   • Browser Extension
   • Why Mocko
   • Technologies
3. Building Locally
   • Requirements
   • Installation
4. Walkthrough
5. Contributing
   • Suggesting Improvements or Reporting Bugs
   • Resolving Issues
6. Contact

Quick Demo

mocko-demo.mp4

About the Project

Mocko is a powerful tool designed to simplify the development process by generating and exporting consistent, user-friendly mock data for projects. Whether you're building apps, testing APIs, or simulating intricate environments, Mocko saves you time by automating the creation of sample data.

Features

• Flexible Data Generation: Create mock data in various formats such as JSON, text, or customized outputs.
• User-Friendly Export Options: Easily export mock data for use in your projects, with options to preview, copy, or send via email.
• AI-Powered Mock Data: Generate realistic data for emails, customer profiles, support tickets, and more using a wide variety of LLMs.
• Fixed Data Sets: Use pre-defined, example-driven static data for consistent testing scenarios.
• Customizable Structures: Define custom data structures and fill them with mock values tailored to your project needs.
• Browser Extension: One-click form autofill on any website with automatic field detection (Chrome & Firefox).

Browser Extension

The browser extension (Chrome & Firefox) transforms Mocko from a data generator into a one-click form filler. Instead of copy-pasting mock data, fill any web form instantly.

Key capabilities:

• Smart Form Detection: Automatically analyzes form structure and maps your mock data to the right fields
• One-Click Autofill: Press Ctrl+Shift+M (or Cmd+Shift+M on Mac), select a template, fill the form
• Framework Agnostic: Works with React, Vue, Angular, or vanilla HTML forms
• Live Sync: Templates sync bidirectionally with the web app - edit anywhere, use everywhere
• Runtime Variables: Use {{ placeholders }} for dynamic values prompted at fill time

Workflow:

1. Open any form on any website
2. Hit Ctrl+Shift+M to open Mocko
3. Extension auto-detects form fields
4. Select an existing template or create one from the detected structure
5. Click fill - fields populate with generated mock data

This eliminates the repetitive cycle of generating → copying → pasting → tabbing between windows that slows down testing and development.

Why Mocko?

Mocko takes the manual work out of testing workflows by providing an easy and fast way to generate the mock data you need. With options for AI-generated prose, structured JSON data, and fixed datasets, it's the perfect sidekick for any developer aiming for efficiency.

With the browser extension, Mocko goes further - your mock data flows directly into forms without leaving the page you're testing. No more alt-tabbing, copying, pasting, and reformatting. Just fill.

Technologies

Frontend & Extension

• Typescript
• React
• Vite
• TailwindCSS
• Dexie (IndexedDB)
• Framer Motion
• Browser Extension (Manifest V3) - Chrome & Firefox

Backend

• Go
• Gin

DevOps & Analytics

• Nx
• Fly.io
• Docker
• Caddy
• Posthog
• Github Actions

Testing

• Playwright
• Vitest

Design and Prototyping

• Figma

Walkthrough

Home Page	Onboarding

Mocko List	Add New Mocko

Generate/Copy/Email Export	Runtime Variables

Drag and Drop Reorder	Custom Devtools

Building Locally

Requirements

• pnpm

  npm install -g pnpm

• Nx

  pnpm i -g nx

Installation

1. Clone the repository:

   git clone https://github.com/brainsaysno/mocko.git

2. Install the dependencies:

   pnpm i

3. If you use tmux, there is a tmuxp configuration to start the server; otherwise, start both the front and back end:

   nx serve frontend

   nx serve backend

4. To build the browser extension:

   pnpm --filter extension build

   Then load the unpacked extension from dist/apps/extension/ in Chrome's extension settings.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Besides giving the project a star, there are 2 main ways to contribute:

Suggesting Improvements or Reporting Bugs

• To suggest an improvement, create an issue that includes the "enhancement" label, with the name of the proposal as the title and a brief description of it or why we should implement it.

• To report a bug, create an issue that includes the "bug" label, with a description of the bug as the title and a brief comment on how you discovered it.

Resolving Issues

If you find an issue you want to resolve, you can submit a PR with your code. To do this:

1. Create a fork of the project
2. Clone the project to your computer (git clone https://www.github.com/YOUR-USERNAME/mocko.git)
3. Create a branch for your proposal (git checkout -b feature/PROPOSAL-NAME)
4. Make changes to the code
5. Commit your changes (git commit -m 'Add PROPOSAL-NAME')
6. Push to your branch (git push origin feature/PROPOSAL-NAME)
7. Open a new pull request explaining your proposal and mentioning the relevant issue.

Contact

Nicolás Russo - nrusso@nrusso.dev

Project Link: https://github.com/brainsaysno/mocko