Gyron.js

A Simple Reactive Framework Without Dependencies

“A JavaScript library for building user interfaces, with complete TypeScript support, and the ability to enable collaborative work through our provided co-editing tool.”

Get StartedView Tutorial
Online Playground

  • Easy to Learn

    You just need to know basic JavaScript syntax and JSX syntax sugar to build an interactive app completely. In the rendering process, all results and behaviors are completely predictable, without any black magic.

    Learn More
    import { createInstance } from 'gyron'
createInstance(<div>Hello, Gyron</div>).render('#root')

  • Component-Based

    Using functions as basic component elements, you can flexibly organize pages and track data changes. You can also use more options to make components cacheable, which is more obvious in large projects. If component updates are slow, you can try using FCD to define components. Specific performance can be viewed by clicking the Learn More button for details.

    Learn More
    simple.tsx
    import { FC } from 'gyron'
export default FC(() => <div>Hello, Gyron</div>)
    index.tsx
    import { createInstance } from 'gyron'
import Hello from './simple'

createInstance(<Hello />).render('#root')

  • Very Small Size

    The core code is less than 10kb (gzipped), but the functionality is very complete. It supports not only SPA mode, but also SSR mode. With minor changes, components can support SSR. All functions can be split, such as route management. For a demo page, no reference is required at all.

    Learn More

  • Strong Vitality

    Fully supports the latest TypeScript type inference, which is more friendly for building large projects and especially important for team collaboration. Imagine when your colleague modifies a component interface without notice, this change could be a hidden danger.

    Learn More

Online Editing

Use online. After editing on the left, wait 3 seconds to preview the effect. It is found that code can be pasted in the editor for real-time preview when reading the documentation later.

index
index
TSX
LESS
资源加载中...