https://github.com/feathers-studio/hyperactive

The hyperactive⚡️ suite of web application development tools
https://github.com/feathers-studio/hyperactive

deno hacktoberfest reactive-programming reactivity ui-framework

Last synced: 8 days ago
JSON representation

The hyperactive⚡️ suite of web application development tools

• Host: GitHub
• URL: https://github.com/feathers-studio/hyperactive
• Owner: feathers-studio
• License: mit
• Created: 2020-02-28T11:53:01.000Z (almost 5 years ago)
• Default Branch: dev
• Last Pushed: 2023-11-30T22:42:14.000Z (about 1 year ago)
• Last Synced: 2024-10-23T10:29:12.454Z (4 months ago)
• Topics: deno, hacktoberfest, reactive-programming, reactivity, ui-framework
• Language: JavaScript
• Homepage:
• Size: 1.07 MB
• Stars: 23
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





hyperactive



Hyperactive is a powerful set of tools to build reactive web applications.

We're currently working on a 2.0 release, which will include fully reactive client-side rendering. To try the latest version, you can get `hyper`:

```bash

npm install https://gethyper.dev

yarn add https://gethyper.dev

pnpm add https://gethyper.dev

bun install https://gethyper.dev

```

Hyperactive is also available on [NPM](https://www.npmjs.com/package/@hyperactive/hyper).

This is not a release version, so expect some bugs.

[![Hyperactive Version 2.0.0-beta.1](https://img.shields.io/static/v1?label=Version&message=2.0.0-beta.1&style=for-the-badge&labelColor=FF6A00&color=fff)](https://npmjs.com/package/@hyperactive/hyper)



Usage



### On the server

```TypeScript

import { renderHTML } from "@hyperactive/hyper";

import { div, p, h1, br } from "@hyperactive/hyper/elements";

assertEquals(

  renderHTML(

    section(

      { class: "container" },

      div(

        img({ src: "/hero.jpg" }),

        h1("Hello World"),

      ),

    ),

  ),

  `


Hello World

`,

);

```


### In the browser

[![@types/web 0.0.188](https://img.shields.io/static/v1?label=@types/web&message=0.0.188&style=for-the-badge&labelColor=ff0000&color=fff)](https://npmjs.com/package/@types/web)

Please install `@types/web` to use Hyperactive in the browser. Your package manager will automatically install the correct version of `@types/web` for you by default. See the [versions](./docs/versions.md) table for the correct version of `@types/web` for each version of Hyperactive.

```bash

bun install @types/web

```

```TypeScript

import { State, renderDOM } from "@hyperactive/hyper";

import { div, p, button } from "@hyperactive/hyper/elements";

const s = new State(0);

const root = document.getElementById("root");

renderDOM(

  root,

  div(

    p("You clicked ", s, " times"),

    button(

      { on: { click: () => s.update(s.value + 1) } },

      "Increment"

    ),

  ),

);

```



Testimonials