https://github.com/stackoverprof/content-expose
Zero-dependency content management dev tool
https://github.com/stackoverprof/content-expose
Last synced: 4 days ago
JSON representation
Zero-dependency content management dev tool
- Host: GitHub
- URL: https://github.com/stackoverprof/content-expose
- Owner: stackoverprof
- Created: 2026-02-03T21:52:33.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-13T07:54:03.000Z (5 months ago)
- Last Synced: 2026-02-13T14:57:24.955Z (5 months ago)
- Language: TypeScript
- Size: 47.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# content-expose
A lightweight content editing devtools panel for React applications. Edit your JSON content in real-time with live preview.
## Installation
```bash
npm install content-expose
# or
pnpm add content-expose
# or
yarn add content-expose
```
## Usage
### 1. Initialize in your root component
```tsx
// app/root.tsx or similar
import { initContentExpose, ContentExpose } from 'content-expose';
import rawContent from '../content.json';
// Initialize with your content
initContentExpose(rawContent);
export default function App() {
return (
<>
>
);
}
```
### 2. Use content anywhere
```tsx
// Any component
import { content } from 'content-expose';
export function Navbar() {
return 
;
}
export function Footer() {
return {content.settings.company_name};
}
```
## Features
- **Keyboard shortcut**: Press `Cmd+E` (Mac) or `Ctrl+E` (Windows/Linux) to toggle the panel
- **Live preview**: Edit JSON and see changes immediately after clicking Preview
- **Tabbed interface**: Only shows content keys you've actually accessed
- **Draggable & resizable**: Position the panel wherever you want
- **Export**: Copy the full JSON to clipboard for easy PR creation
- **Reset**: Revert to original content at any time
## How it works
1. `initContentExpose()` stores your raw content in a singleton
2. The `content` export is a Proxy that tracks which keys are accessed
3. `ContentExpose` component shows tabs only for accessed content sections
4. Preview stores modified content in localStorage and reloads
5. The proxy returns localStorage content when available
## License
MIT