Getting started

A form is a versioned schema. Define its fields, then pass it to Tungsten.

Install

Install Tungsten from npm into your React application. React 18.3 or 19 is a peer dependency.

npm install @myoon/tungsten

Until the first stable release, the standard install gets the newest testing release. After that, it follows stable releases. Use @next to keep following testing releases; development releases use @dev.

npm install @myoon/tungsten@next

Using pnpm instead?

pnpm add @myoon/tungsten

Choose a language to use Tungsten’s bundled messages. Literal form labels need no translation JSON. See the Localization (i18n) guide for supported languages, custom labels, overrides and the blank template.

Your first form

import { Tungsten } from '@myoon/tungsten/react'
import '@myoon/tungsten/react/design/tungsten.css'

const schema = {
  "schemaVersion": "sprout",
  "form": [
    {
      "type": "text",
      "key": "name",
      "view": {
        "label": "Your name"
      },
      "validators": [
        {
          "kind": "required"
        }
      ]
    }
  ]
}

export default function App() {
  return <Tungsten schema={schema} onSubmit={(values) => console.log(values)} />
}

The default design installs its styles automatically. The explicit stylesheet import is available for hosts that prefer static CSS loading.

Bootstrap design

The Bootstrap adapter ships with Tungsten. Install Bootstrap 5.3.8 or later 5.x, load its CSS before the adapter stylesheet, and pass the adapter as the design prop.

npm install @myoon/tungsten bootstrap@^5.3.8

import { Tungsten } from '@myoon/tungsten/react'
import bootstrap from '@myoon/tungsten/react/design/bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import '@myoon/tungsten/react/design/bootstrap.css'

<Tungsten schema={schema} design={bootstrap} colorScheme="dark" onSubmit={save} />

All three designs support light and dark modes, all existing fields, groups and repeaters. Bootstrap JavaScript and React-Bootstrap are not required. The editor uses the selected design for its preview; its authoring and settings interface retains the Tungsten design.

Material design

To use the Material design, install Material UI 9.5 and Emotion 11 alongside Tungsten. The adapter is included in Tungsten; these libraries are required for Material and are installed separately.

npm install @myoon/tungsten @mui/material@^9.5.0 @emotion/react@^11.14.0 @emotion/styled@^11.14.1

import { Tungsten } from '@myoon/tungsten/react'
import material from '@myoon/tungsten/react/design/material'
import '@myoon/tungsten/react/design/material.css'

<Tungsten schema={schema} design={material} colorScheme="dark" language="de" />

Material uses MUI inputs, choices and buttons. Complex pickers, groups and repeaters share Tungsten interactions and use the same local Material palette. Styles install automatically; no global CSS reset, icon package or MUI X date library is required.

For React 18, follow Material UI's installation guide to align react-is with your React version. A custom Material theme can be supplied with createMaterialDesign; create the design once outside your component. Material UI

import { createMaterialDesign } from '@myoon/tungsten/react/design/material'

const branded = createMaterialDesign(mode => ({
  palette: { primary: { main: mode === 'dark' ? '#90caf9' : '#1976d2' } },
  typography: { fontFamily: 'system-ui, sans-serif' },
}))

<Tungsten schema={schema} design={branded} colorScheme="light" />

The editor and examples have separate form design, theme and language controls. Their choices are saved per page and do not change the website settings. Switching them preserves the schema and entered values. Labels without your translations retain their original text.

Explore next

Read the field reference, explore working examples, or build a form in the editor. The same schema works in every view.