Oyren React Renderer
A powerful React code editor and live preview component that renders React + Tailwind CSS code in the browser with real-time editing capabilities and intelligent code navigation.
Live Code Editor
Monaco Editor with TypeScript support, syntax highlighting, and intelligent autocomplete.
Real-time Preview
Instant preview of React components with Tailwind CSS styling in the browser.
Smart Navigation
Cmd/Ctrl+Click to navigate to component definitions and file references.
File Manager
Built-in file explorer with drag-and-drop support and file operations.
Resizable Layout
Flexible layout with resizable panels and responsive design for all screen sizes.
Hot Reload
Instant updates and error handling with beautiful error overlays and recovery.
Live Demo
Try the component yourself! Edit the code and see the changes instantly.
React Counter
Installation
Get started with Oyren React Renderer in your project
Install via npm
Basic Usage
import { OyrenReactRenderer } from 'oyren-react-renderer';
function App() {
const initialCode = {
'App.tsx': `import React from 'react';
export default function App() {
return (
<div className="p-4">
<h1 className="text-2xl font-bold text-blue-600">
Hello World!
</h1>
</div>
);
}`,
};
return (
<OyrenReactRenderer
codes={initialCode}
height="600px"
onCodeChange={(newCodes) => console.log(newCodes)}
/>
);
}Contribute to the Project
Oyren React Renderer is open source and we welcome contributions! Whether it's bug fixes, new features, or documentation improvements.