Development-only visual indicators for mock data in React, Vue, and Angular applications.
npm version npm downloads license
Installation • Usage • Variants • Props • Contributing
MockSee is a development-only library for developers who prototype UI components with mock data before integrating real APIs or databases.
When building front-end first, it's easy to lose track of which components are still using placeholder data—especially as your app grows. MockSee wraps mock-data-driven components with subtle visual indicators (borders, badges, or minimal outlines) so you always know what's "real" vs. "fake" at a glance.
- Frontend-first workflows — Build and iterate on UI before backend APIs exist
- AI-Assisted Development — Visually distinguish between AI-generated mock implementations and finalized, production-ready code
- Design system development — Clearly mark placeholder content in component libraries
- Onboarding & handoffs — New team members instantly see what still needs integration
- Sprint planning — Use MockSee as a living checklist of unfinished data connections
- Demo builds — Ensure you never accidentally ship mock data by making it visually obvious
- Code reviews — Reviewers can spot mock dependencies without digging through code
Unlike // TODO comments buried in code, MockSee surfaces incomplete work directly in the UI where you can't ignore it. This is especially powerful when pair-programming with AI: it creates an unambiguous visual distinction between AI-scaffolded mock implementations and finalized code. The visual feedback disappears automatically in production (via the enabled prop), so there's zero risk of shipping debug artifacts.
npm install @mocksee/react
npm install @mocksee/vue
npm install @mocksee/angular
import { MockSee, MockSeeProvider } from '@mocksee/react' // Wrap your app with the provider function App() { return ( <MockSeeProvider enabled={process.env.NODE_ENV === 'development'} defaultVariant="border" tooltipTrigger="hover" > <YourApp /> </MockSeeProvider> ) } // Mark components with mock data function AdvisorList() { return ( <MockSee label="Advisors" reason="Not connected to database"> <div className="grid"> {mockAdvisors.map(advisor => ( <AdvisorCard key={advisor.id} advisor={advisor} /> ))} </div> </MockSee> ) }
<script setup> import { MockSee, MockSeeProvider } from '@mocksee/vue' </script> <template> <MockSeeProvider :enabled="isDev" default-variant="border"> <MockSee label="Users" reason="Using mock data"> <UserList :users="mockUsers" /> </MockSee> </MockSeeProvider> </template>
import { MockSeeComponent, MockSeeService } from '@mocksee/angular' @Component({ selector: 'app-root', standalone: true, imports: [MockSeeComponent], template: ` <mock-see label="Products" reason="Static mock data"> <app-product-list [products]="mockProducts" /> </mock-see> ` }) export class AppComponent { mockProducts = [...] constructor(private mockSeeService: MockSeeService) { this.mockSeeService.configure({ enabled: !environment.production, defaultVariant: 'border' }) } }
import { MockSeeProvider } from '@mocksee/react' function App() { return ( <MockSeeProvider enabled={process.env.NODE_ENV === 'development'} defaultVariant="border" tooltipTrigger="hover" theme={{ borderColor: '#8b5cf6' }} > <YourApp /> </MockSeeProvider> ) }
MockSee displays the reason prop as an elegant tooltip. Choose how tooltips are triggered:
hover(default): Tooltip appears when hovering over the MockSee containerclick: Tooltip appears when clicking the label badge (allows click-through to content beneath)
// Click mode - great for touch devices or when content has hover interactions <MockSeeProvider tooltipTrigger="click"> <MockSee reason="Click the label to see this"> <YourComponent /> </MockSee> </MockSeeProvider>
The reason prop supports markdown formatting for richer descriptions:
<MockSee label="API" reason="**Status:** Waiting on backend This endpoint needs: - `GET /api/users` for listing - `POST /api/users` for creation See [API docs](https://docs.example.com) for details." > <UserTable /> </MockSee>
Supported markdown:
- Bold:
**text**or__text__ - Italic:
*text*or_text_ Code:`code`- Line breaks: newlines are preserved
border(default): Dashed border around content with floating labelbadge: Just the label badge positioned absolutelyminimal: Thin outline with corner label
<MockSee variant="minimal" label="API"> <DataTable /> </MockSee>
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string | "MOCK" | Badge text |
reason |
string | - | Tooltip description (supports markdown) |
variant |
'border' | 'badge' | 'minimal' | 'border' | Visual style |
disabled |
boolean | false | Force hide this instance |
labelBg |
string | - | Override label badge background color |
labelColor |
string | - | Override label text color |
borderColor |
string | - | Override border/outline color |
tooltipBg |
string | - | Override tooltip background color |
tooltipColor |
string | - | Override tooltip text color |
| Prop | Type | Default | Description |
|---|---|---|---|
enabled |
boolean | true | Enable/disable all indicators |
defaultVariant |
'border' | 'badge' | 'minimal' | 'border' | Default visual style |
tooltipTrigger |
'hover' | 'click' | 'hover' | How tooltips are triggered |
theme |
MockSeeTheme | - | Custom styling |
interface MockSeeTheme { borderColor?: string // Indicator border color labelBg?: string // Badge background color labelColor?: string // Badge text color labelFontSize?: string // Badge font size tooltipBg?: string // Tooltip background color tooltipColor?: string // Tooltip text color tooltipFontSize?: string // Tooltip font size }
See MockSee in action using the included demo apps. They showcase all variants and usage patterns in realistic environments.
To run the demos locally:
# React demo npm run dev:react # Vue demo npm run dev:vue # Angular demo npm run dev:angular
| Package | Description |
|---|---|
@mocksee/react |
React adapter |
@mocksee/vue |
Vue 3 adapter |
@mocksee/angular |
Angular 17+ adapter |
@mocksee/core |
Framework-agnostic core |
We welcome contributions! This is a pnpm monorepo.
# Clone the repo git clone https://github.com/orangebread/mocksee.git cd mocksee # Install dependencies pnpm install # Build all packages pnpm build # Run the React demo pnpm dev:react
mocksee/
├── packages/
│ ├── core/ # Framework-agnostic utilities and styles
│ ├── react/ # React adapter (published as `@mocksee/react`)
│ ├── vue/ # Vue adapter
│ └── angular/ # Angular adapter
└── examples/
├── react-demo/
├── vue-demo/
└── angular-demo/
MIT