Volta - LC/NC Builder Toolkit

Volta is a toolkit for developers who want to build low-code/no-code platforms. It provides the essential building blocks: component registry, data/state bindings, and React adapters.

Note: Volta is not a visual builder itself—it's the foundation that powers them.

🎯 What Volta Provides

| Category | Features | | ----------------- | ---------------------------------------------------------------------------------------- | | Core | initVolta(), query(), mutate(), register(), store() | | Layers | ThemeManager (white-label theming) | | Signals | createDerivedStore() with Sthira computed signals | | React Adapter | @voltakit/volta/react - useVolta, useVoltaQuery, useVoltaStore, useCreateStore |

📦 Installation

npm install @voltakit/volta

Built on @sthirajs/* - all dependencies bundled!

🚀 Quick Start

Initialize Volta

import { initVolta } from '@voltakit/volta'

initVolta({
  baseUrl: 'https://api.example.com',
  enableDevTools: true,
})

Vanilla API (Framework-Agnostic)

import { query, mutate, invalidate } from '@voltakit/volta'

// Fetch data
const users = await query<User[]>('/users')
const user = await query<User>('/users/:id', { path: { id: '123' } })

// Mutate data
const newUser = await mutate<User>('/users', { name: 'John' })
await mutate('/users/123', { name: 'Updated' }, { method: 'PUT' })

// Invalidate cache
invalidate('/users')

Component Registration

import { query, store, register } from '@voltakit/volta'

// Define data binding (lazy fetch)
const userData = query({
  endpoint: '/users/:userId',
  params: ['userId'],
})

// Define state binding (scoped per instance)
const userState = store({
  initial: { activeTab: 'info' },
})

// Register component
register('user-card', {
  type: 'data-display',
  component: () => import('./UserCard'),
  data: userData,
  state: userState,
  theme: ['colors.primary', 'colors.accent'],
})

React Hooks

import { useVolta, useCreateStore, useVoltaStore } from '@voltakit/volta/react'

function UserCard({ userId }: { userId: string }) {
  // Access global Volta state
  const { isReady } = useVolta()

  // Create or get a store lazy-loaded
  const userStore = useCreateStore('user-settings', {
    initialState: { theme: 'light', notifications: true },
  })

  // Subscribe to store updates
  const settings = useVoltaStore(userStore)

  if (!isReady) return <div>Initializing...</div>

  return (
    <div>
      <h2>User Settings</h2>
      <p>Theme: {settings?.theme}</p>
    </div>
  )
}

🧩 Examples

Check out the examples/ directory for full-featured demos:

| Example | Description | Features | | ----------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------- | | React CRM | dashboard application | Data fetching (useVoltaQuery), Mutations, Theme switching | | Component Builder | Low-code editor (Puck-style) | Drag & Drop (react-dnd), Component Registry, Undo/Redo History, Property Editor |

Signal-Based Derived Stores

import { signal } from '@sthirajs/core'
import { createDerivedStore } from '@voltakit/volta'

const count = signal(5)
const multiplier = signal(2)

const derived = createDerivedStore([count, multiplier], ([c, m]) => c * m)

console.log(derived.getValue()) // 10
count.set(10)
console.log(derived.getValue()) // 20

📂 Project Structure

src/
├── core/                    # Pure TypeScript (framework-agnostic)
│   ├── volta.ts             # Main API: query, mutate, lifecycle
│   ├── component-registry/  # register, query, store, bindings
│   └── types/
│
├── layers/                  # Application-level contexts
│   ├── theme-manager/       # White-label theming
│   ├── data-layer/          # Data fetching (internal)
│   └── state-layer/         # State management (internal)
│
├── react/                   # React adapter
│   ├── hooks/               # useVoltaComponent, useVoltaRegistry
│   └── providers/
│
└── index.ts

📚 Documentation

• Getting Started
• Architecture Overview
• Vanilla API
• Component Registry
• React Hooks
• Migration Guide (v0.4.x → v0.5.0)

🛠️ Development

npm install    # Install dependencies
npm run build  # Build
npm run lint   # Lint
npm run test   # Test (100+ tests)

🤝 Contributing

Contributions welcome! See Contributing Guide.

📄 License

MIT License.

Part of the Sthira ecosystem - github.com/laphilosophia