canvasui

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>

Built-in components

component name	supported props	supported CSS
<button>	label, @click
<checkbox>	value, label
<color>	value
<div>		width, height, padding, margin, border, border-radius, background
<image>	path	width, height, border-radius
<input>	value, hint	width
<radio>	value, label, option
<select>	value, options
<slider>	value	width
<switch>	value
<template>		width, height
<text>	content	font-size, color