One core · native adapters Единое ядро · нативные адаптеры

React and Vue UI on one engine.

UI для React и Vue на одном ядре.

Many ready-made components — tables, forms, charts, calendars, diagrams. Native React and Vue adapters share the same engine, DOM contract and CSS classes. Free, MIT.

Множество готовых компонентов — таблицы, формы, графики, календари, диаграммы. Нативные адаптеры для React и Vue используют одно ядро, один DOM-контракт и одинаковые CSS-классы. Бесплатно, MIT.

# installустановка
npm install skygraph-react
import { Form, Field, SubmitButton } from 'skygraph-react'

function App() {
  return (
    <Form defaultValues={{ email: '' }}>
      <Field name="email" label="Email" />
      <SubmitButton>Submit</SubmitButton>
    </Form>
  )
}
# installустановка
npm install skygraph-vue
<script setup lang="ts">
import { SgForm, SgField, SgSubmitButton } from 'skygraph-vue'
</script>

<template>
  <SgForm :default-values="{ email: '' }">
    <SgField name="email" label="Email" />
    <SgSubmitButton>Submit</SgSubmitButton>
  </SgForm>
</template>

The app code stays framework-native. The shared part is the core behaviour, CSS contract and visual output.

Код приложения остаётся нативным для фреймворка. Общее здесь — поведение ядра, CSS-контракт и визуальный результат.

50+
UI components
UI-компонентов
2
Native adapters
Нативных адаптера
Same
Один
CSS contract
CSS-контракт
MIT
Free to use
Свободное использование
Why SkyGraph
Зачем

One engine. Native adapters. Same UI.

Одно ядро. Нативные адаптеры. Один UI.

Shared core behaviour

Общее поведение в ядре

State, validation, selection, history and export logic live in one core package. React and Vue subscribe to the same behaviour.

Состояние, валидация, выделение, история и экспорт живут в одном core-пакете. React и Vue подписываются на одно поведение.

Native framework APIs

Нативные API фреймворков

React gets React components. Vue gets SFCs and Composition API. No wrapper layer pretending one framework is the other.

React получает React-компоненты. Vue получает SFC и Composition API. Без слоя-обёртки, который притворяется другим фреймворком.

One CSS contract

Один CSS-контракт

Both adapters render the same .sg-* classes and read the same design tokens. Theme once, keep both UIs aligned.

Оба адаптера рендерят одинаковые .sg-* классы и читают одни design tokens. Темизируешь один раз — оба UI остаются выровнены.

TypeScript first

TypeScript из коробки

Strict types end-to-end. Form schemas from JSON Schema or Zod. No any in the public API.

Строгая типизация по всем компонентам. Схемы форм из JSON Schema или Zod. Никакого any в публичном API.

Accessible by default

Доступность по умолчанию

Keyboard navigation, ARIA roles and focus traps are built in. You don't have to remember them on every component.

Клавиатурная навигация, ARIA-роли и focus-trap — встроены. Не надо помнить про них каждый раз.

Print & PDF

Печать и PDF

Tables, diagrams and charts know how to print themselves. One prop — and the native browser print dialog shows a clean version.

Таблицы, диаграммы и графики умеют печатать сами себя. Один проп — и нативный print-диалог браузера показывает чистую версию.

Try it
Попробовать

Live demos

Живые демо

Component docs and mini-app showcases, available for both React and Vue.

Документация по компонентам и мини-приложения — отдельно под React и под Vue.

React
Component docs
Документация компонентов
Many components with live previews, source code and API tables. Open any component and try it right in the browser.
Множество компонентов с live-превью, исходниками и API-таблицами. Открыл компонент и сразу пощёлкал в браузере.
Vue 3
Component docs
Документация компонентов
Many Vue 3 components with Composition API, live previews and API tables. Native Sg* SFCs — not a React wrapper.
Множество Vue 3 компонентов на Composition API с live-превью и API-таблицами. Нативные Sg* SFC — не обёртка над React.
React
12 mini-apps
12 мини-приложений
CRM, helpdesk, dashboard, analytics, file manager, HR portal, workflow editor and more — full screens assembled from 30+ components.
CRM, helpdesk, dashboard, аналитика, файловый менеджер, HR-портал, редактор workflow и другие — целые экраны на 30+ компонентах.
Vue 3
12 mini-apps
12 мини-приложений
The same 12 mini-apps on Vue 3 — CRM, helpdesk, dashboard, analytics, file manager, HR portal, workflow editor, e-commerce and more.
Те же 12 мини-приложений на Vue 3 — CRM, helpdesk, dashboard, аналитика, файловый менеджер, HR-портал, редактор workflow, e-commerce и другие.