@magic/hyperapp
Advanced tools
Fork of the tiny framework for building web interfaces. use hyperapp instead!
This is a fork for magic. use hyperapp upstream instead.
The tiny framework for building web interfaces.
To learn more, go to https://hyperapp.dev for documentation, guides, and examples.
Install Hyperapp with npm or Yarn:
npm i hyperapp
Then with a module bundler like Parcel or Webpack import it in your application and get right down to business.
import { h, app } from 'hyperapp'
Don't want to set up a build step? Import Hyperapp in a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.
<script type="module">
import { h, app } from 'https://unpkg.com/hyperapp'
</script>
Here's the first example to get you started: a counter that can go up or down. You can try it online here.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { h, app } from 'https://unpkg.com/hyperapp'
app({
init: 0,
view: state =>
h('main', {}, [
h('h1', {}, state),
h('button', { onClick: state => state - 1 }, '-'),
h('button', { onClick: state => state + 1 }, '+'),
]),
node: document.getElementById('app'),
})
</script>
</head>
<body>
<main id="app"></main>
</body>
</html>
The app starts off with init as the initial state. Our code doesn't explicitly maintain any state. Instead, we define actions to transform it and a view to visualize it. The view returns a plain object representation of the DOM known as a virtual DOM, and Hyperapp updates the real DOM to match it whenever the state changes.
Now it's your turn! Experiment with the code a bit. Spend some time thinking about how the view reacts to changes in the state. Can you add a button that resets the counter back to zero? Or how about multiple counters?
We love to talk JavaScript and Hyperapp. If you've hit a stumbling block, hop on the Hyperapp Slack or drop by Spectrum to get support, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll try to help you out.
Is anything wrong, unclear, missing? Help us improve this page.
FAQs
Fork of the tiny framework for building web interfaces. use hyperapp instead!
The npm package @magic/hyperapp receives a total of 210 weekly downloads. As such, @magic/hyperapp popularity was classified as not popular.
We found that @magic/hyperapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.