https://github.com/killerwolf/draft-to-html-previewer
A simple web tool that converts Draft.js raw content state (JSON) into live HTML preview. Perfect for developers working with Draft.js who need to quickly visualize their editor's content state or debug formatting issues.
https://github.com/killerwolf/draft-to-html-previewer
html
Last synced: 4 months ago
JSON representation
A simple web tool that converts Draft.js raw content state (JSON) into live HTML preview. Perfect for developers working with Draft.js who need to quickly visualize their editor's content state or debug formatting issues.
- Host: GitHub
- URL: https://github.com/killerwolf/draft-to-html-previewer
- Owner: killerwolf
- Created: 2025-09-25T13:03:54.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-25T20:08:00.000Z (9 months ago)
- Last Synced: 2025-10-10T07:22:21.082Z (8 months ago)
- Topics: html
- Language: TypeScript
- Homepage: https://h4md1.fr/draft-to-html-previewer/
- Size: 142 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Draft.js JSON Previewer
A simple web tool that converts Draft.js raw content state (JSON) into live HTML preview. Perfect for developers working with Draft.js who need to quickly visualize their editor's content state or debug formatting issues.
## 🚀 Live Demo
**Try it now!** [**View Live Demo**](https://h4md1.fr/draft-to-html-previewer/) 🌐
---
## What it does
- **Input**: Paste your Draft.js raw content state JSON
- **Output**: Live HTML preview with proper formatting
- **Features**: Real-time conversion, error handling, sample data included
## Run Locally
**Prerequisites:** Node.js
1. Install dependencies:
```bash
npm install
```
2. Run the app:
```bash
npm run dev
```
## Contributing
Found a bug or want to add a feature? Contributions are welcome!
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## Development
### Code Quality
This project uses [Biome](https://biomejs.dev/) for fast formatting and linting:
```bash
# Format code
npm run format
# Lint and fix issues
npm run lint
# Check everything (format + lint)
npm run check
# CI check (no fixes, fails on errors)
npm run ci
```
### Tech Stack
- **React 19** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool
- **Tailwind CSS** - Styling
- **Biome** - Fast formatter and linter
- **draftjs-to-html** - Draft.js conversion library