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

GL Runtime

index.js

text.js

styles.css

1import { useState } from 'react'2import Text from './text'3import './styles.css'45export default function App() {6  const [num, inc] = useState(1)7  const [darkMode, setDarkMode] = useState(false)8  const volume = num % 69  10  return (11    <div className={`root ${darkMode ? 'dark' : ''}`}>12      <div className="theme-toggle">13        <button14          onClick={() => setDarkMode(!darkMode)}15          className={`toggle-button ${darkMode ? 'dark' : ''}`}16        >17          <span className={`toggle-slider ${darkMode ? 'dark' : ''}`} />18        </button>19      </div>20      <h2>21        hello <Text />22      </h2>23      <div className='volume-section'>24        <div className='volume-label'>Volume</div>25        <div className='volume-indicator'>26          {Array(5).fill(0).map((_, i) => (27            <div 28              key={i} 29              className={`volume-bar ${i < volume ? 'active' : ''}`}30            />31          ))}32        </div>33      </div>34      <button className='button' onClick={() => inc(num + 1)}>increase</button>35    </div>36  )37}

import { useState } from 'react'
import Text from './text'
import './styles.css'

export default function App() {
  const [num, inc] = useState(1)
  const [darkMode, setDarkMode] = useState(false)
  const volume = num % 6
  
  return (
    <div className={`root ${darkMode ? 'dark' : ''}`}>
      <div className="theme-toggle">
        <button
          onClick={() => setDarkMode(!darkMode)}
          className={`toggle-button ${darkMode ? 'dark' : ''}`}
        >
          <span className={`toggle-slider ${darkMode ? 'dark' : ''}`} />
        </button>
      </div>
      <h2>
        hello <Text />
      </h2>
      <div className='volume-section'>
        <div className='volume-label'>Volume</div>
        <div className='volume-indicator'>
          {Array(5).fill(0).map((_, i) => (
            <div 
              key={i} 
              className={`volume-bar ${i < volume ? 'active' : ''}`}
            />
          ))}
        </div>
      </div>
      <button className='button' onClick={() => inc(num + 1)}>increase</button>
    </div>
  )
}

Usage

React Runtime

Use the DevJar component to create interactive React code previews. Pass your files as an object and provide a module resolver function to handle imports. Devjar supports CSS imports and Tailwind CSS out of the box.

import { DevJar } from 'devjar'const files = {  'index.js': `export default function App() {  return <h1>Hello World</h1>}`}function App() {  return (    <DevJar      files={files}      getModuleUrl={(m) => `https://esm.sh/${m}`}    />  )}

Using the Hook

For more control, use the useLiveCode hook directly. It returns an iframe ref, error state, and a load function to execute your code files.

import { useLiveCode } from 'devjar'import { useEffect, useState } from 'react'function Playground() {  const { ref, error, load } = useLiveCode({    getModuleUrl: (m) => `https://esm.sh/${m}`  })    const [files, setFiles] = useState({    'index.js': `export default function App() {  return <h1>Hello World</h1>}`  })    useEffect(() => {    load(files)  }, [files])    return <iframe ref={ref} />}