0.1.1 • Published 7 months ago
canvasui v0.1.1
CanvasUI
CanvasUI
is a canvas-based UI framework.
Online Demo (a page with only one <canvas>)
Introduction
CanvasUI
re-implements key technologies of modern front-end development. It is based on HTML <canvas>, just using Vanilla JS, no external dependency, it contains:
- Declarative tags (e.g. <button>, <image>, and even <input>)
- Layout engine that supports Flex
- Commonly used CSS
- MVVM
- Timeline and Animation
- Mobile-compatible gestures
- Scaffolding out of the box and development server that supports hot reload
Usage
- Create a project with
npx canvasui project-name
- Use vscode to open the project root directory to enjoy code highlighting
- Run
npm run build
in the root directory of the project to start the development server (the code will also be packaged into the/public
directory) - Use a browser to visit
http://127.0.0.1:3000/
- Modify
main.ui
in the/src
directory, the browser will update and modify in real time (and package it to the/public
directory at the same time)
Sample code
<script>
let count = 0
function increment() {
count += 1
}
return { count, increment }
</script>
<template>
<button label="click { count } times" @click="{ increment }"></button>
</template>
<style>
template {
justify-content: center;
align-items: center;
}
</style>