Devjar

Live React Component Previews in Browser

Devjar empowers you create interactive, real-time React code preview easier. Builtin Tailwind and CSS imports for styling, creating demos that are stylish and eye-catching.

Source Code & Usage ↗

Examples

Tailwind CSS

index.js

import React, { useState } from 'react'function App() {  const [darkMode, setDarkMode] = useState(false)  return (    <div      className={`flex flex-col items-center justify-center min-h-screen ${        darkMode ? 'bg-gray-800 text-white' : 'bg-white text-black'      }`}    >      <h1 className="text-2xl font-semibold mb-4">{darkMode ? 'Dark Mode' : 'Light Mode'}</h1>      <button        onClick={()=> setDarkMode(!darkMode)}        className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"      >        Toggle {darkMode ? 'Light' : 'Dark'} Mode      </button>    </div>  )}export default App

Plain CSS

index.js

./text.js

./styles.css

  import { useState } from 'react'  import Text from './text'  import './styles.css'  export default function App() {    const [num, inc] = useState(1)        return (      <div className='container'>        <h2>          hello <Text />        </h2>        <p>Volume {Array(num % 6).fill('●').join('')}</p>        <button className='button' onClick={()=> inc(num + 1)}>increase</button>      </div>    )  }

Playground

index.js

export default function App() {  return "type your code here..."}