Lupine.js is a full-featured web application that includes both frontend and backend. The frontend, Lupine.web, is an extremely lightweight framework (7kb gzipped for a hello-world project with all core features) using React TSX syntax. The backend, Lupine.api, is a highly efficient and minimalistic framework similar to Express. It supports server-side rendering (SSR) from scratch, Page Router, CSS-in-JS, .env file, Theme, Mobile and Desktop, HTTPS and multiple domains in one instance.
const Counter = () => {
const [count, setCount] = useState(0);
const css: CssProps = {
padding: '20px',
textAlign: 'center',
h1: {
color: 'blue',
'&:hover': { color: 'red' },
},
};
return (
<div css={css}>
<h1>Hello World</h1>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};Ready to give it a try? You can scaffold a new project in seconds.
Use our CLI tool to create a new app, and select a template.
npx create-lupine@latest my-awesome-appEnter the directory and start the dev server.
cd my-awesome-app
npm install
npm run devVisit http://localhost:11080 and you'll see your first Lupine app running!
To enable HTTPS locally (e.g., https://localhost:11083), you'll need to generate a local certificate using mkcert. See mkcert.
Here is a sample command:
mkcert example.com "*.example.com" localhost "*.dev.local" 127.0.0.1 ::1
Lupine.components offers a rich collection of out-of-the-box components, including:
-
Basic Components: Various buttons, Toggle Button, Badge, Spinner, Stars Input, and Tooltip.
-
Form & Input: Various inputs (e.g., Number, Search, Tag), Editable Label, Toggle Switch, Cascader, Range Input, Gauge or Dial, Time Picker, and Date Picker.
-
Navigation & Menu: Popup Menu, Floating Menu, Mobile Side Menu, Breadcrumbs, Tabs, Slide Tabs, and Paging Link.
-
Data Display & Media: Card, Avatar, Carousel, Timeline, Progress, Radial Progress, Skeleton, YouTube Player, Google Map Wrapper, and QR Code Generator.
-
Charts: Pie, Donut, Column, Bar, Line, Area, Radar, Gauge, and Scatter charts.
-
Editors & Viewers: Rich Text (HTML) Editor, Image Editor, PDF Editor, and PDF Viewer.
-
Overlays & Feedback: Modal Window, Message Box, Action Sheet, Notice Message, Pull to Refresh, and Tour.
-
Layout & Frames: Responsive Frame, Slider Frame, Resizable Splitter, and Aspect Ratio.
-
Special FX & Utilities: Text Effects, Redirect, and more!
-
Live Demo: https://uuware.github.io/lupine.js/demo
Image Editor, an image editing template built on Lupine.js. It provides a lightweight yet feature-rich image manipulation experience directly in the browser. You can draw freely with a pencil tool, use various built-in shapes, add text and stickers, or even crop, rotate, and scale images.
You can view the live demo here:
The is the source repository:
- Source Repository: https://github.com/uuware/lupine-image-editor
PDF Editor, a dedicated PDF editing template built on Lupine.js. It delivers a streamlined and high-performance PDF manipulation experience directly in the browser. You can draw freely with a pencil tool, use various built-in shapes, add text and stickers, and remove or add pages.
You can view the live demo here:
- Live Demo: https://uuware.github.io/lupine-pdf-editor/
The is the source repository:
- Source Repository: https://github.com/uuware/lupine-pdf-editor
Notes and Tools, a versatile workspace application template built on Lupine.js. It is designed to act as a robust foundation for building note-taking software and handy utility tools.
You can view the live demo here:
The is the source repository:
- Source Repository: https://github.com/uuware/lupine-notes-and-tools
Responsive Starter, a clean and adaptable starter template provided by Lupine.js. It offers a solid foundation with modern responsive layouts (like tabs and side menus), ensuring your application looks great on both mobile and desktop screens. Using this template alongside AI, you can rapidly build and deploy cross-platform applications.
You can select this template when creating a new project with the create-lupine CLI.
You can view the live demo here:
The is the source repository:
- Source Repository: https://github.com/uuware/lupine-template-responsive-starter
Doc Starter, a documentation framework (Lupine.press) built on Lupine.js, inheriting the latter's "ultra-lightweight" and "high-performance" DNA. It lets you build professional, responsive, and multi-language documentation sites with simple Markdown, and can be hosted for free on GitHub Pages.
You can select this template when creating a new project with the create-lupine CLI.
You can view the live demo here:
The is the source repository:
- Source Repository: https://github.com/uuware/lupine-template-doc-starter
CV Starter template provided by the Lupine.js framework to generate a beautiful, responsive resume website just by writing simple Markdown files. It comes with black and white theme switching, multi-language support, and can be hosted for free on GitHub Pages.
You can select this template when creating a new project with the create-lupine CLI.
You can view the live demo here:
The is the source repository:
- Source Repository: https://github.com/uuware/lupine-template-cv-starter
This project includes a specialized context file for AI coding assistants.
- File:
AI_CONTEXT.md(Project Root) - Usage: When asking an AI to write code for this project, always ask it to "Read AI_CONTEXT.md first" or copy-paste the relevant sections into your prompt.
- Purpose: It contains critical rules (e.g., "No React Hooks", "Use HtmlVar") and design patterns unique to Lupine.js that standard AI models may not know.
"Read
AI_CONTEXT.mdfirst. Create a 'User Profile' component that includes a standard settings list (Avatar, Name, Email) and a save button. Use theSliderFramenavigation pattern."