A full-page HTML editor component for React with iframe isolation
npm install canva-editor-htmlA full-page HTML editor component for React that allows users to edit text content within complete HTML documents while preserving structure, styles, and scripts.
- ✅ Edit text content directly in the preview
- ✅ Preserves HTML structure, styles, and scripts
- ✅ Download edited HTML with proper Doctype
- ✅ Load external HTML files
- ✅ Real-time editing with contentEditable
- ✅ Isolated iframe prevents CSS/JS conflicts
- ✅ TypeScript support
- ✅ Responsive design
This component follows robust architectural decisions:
1. Iframe Isolation - Uses to create a separate browsing context
2. Content Injection - Uses document.write() for same-origin content injection
3. ContentEditable Engine - Makes the entire editable
4. Proper Serialization - Preserves Doctype when saving
5. Security Sandbox - Controlled iframe permissions
6. UX Enhancements - Injected CSS for better editing experience
``bash`
npm install canva-editor
or
`bash`
yarn add canva-editor
`jsx
import HTMLEditor from 'canva-editor';
import 'canva-editor/dist/style.css';
function App() {
const htmlContent =
Click to edit this text!
; return (
initialHTML={htmlContent}
fileName="my-document.html"
/>
);
}export default App;
`Component Usage
$3
`jsx
import HTMLEditor from './HTMLEditor';function App() {
const htmlContent =
; return (
initialHTML={htmlContent}
fileName="my-document.html"
/>
);
}
`$3
`jsx
import HTMLEditor from './HTMLEditor';function App() {
const handleSave = (htmlContent) => {
console.log('Saved HTML:', htmlContent);
// Send to server, save to database, etc.
};
const handleChange = (htmlContent) => {
console.log('Content changed');
// Auto-save, track changes, etc.
};
return (
initialHTML={htmlContent}
fileName="document.html"
onSave={handleSave}
onChange={handleChange}
showToolbar={true}
/>
);
}
`Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
initialHTML | string | '' | Initial HTML content to load |
| fileName | string | 'document.html' | Default file name for downloads |
| onSave | function | null | Callback when content is saved (receives HTML string) |
| onChange | function | null | Callback when content changes (receives HTML string) |
| showToolbar | boolean | true | Whether to show the toolbar |Features
- ✅ Edit text content directly in the preview
- ✅ Preserves HTML structure, styles, and scripts
- ✅ Download edited HTML with proper Doctype
- ✅ Load external HTML files
- ✅ Reset to original content
- ✅ Real-time editing with contentEditable
- ✅ Isolated iframe prevents CSS/JS conflicts
- ✅ Responsive design
File Structure
`
.
├── HTMLEditor.jsx # Main component
├── HTMLEditor.css # Component styles
├── App.jsx # Example usage
├── App.css # App styles
├── main.jsx # React entry point
├── index.html # HTML template
├── package.json # Dependencies
├── vite.config.js # Vite configuration
├── sample.html # Sample HTML to edit
└── reasoning.txt # Architecture documentation
`How It Works
$3
The component uses an