Morph
FeaturesHow it WorksCodeCLIDocs
← Docs Home
Getting Started
  • Introduction
  • Installation
  • Quick Start
  • Configuration
  • Project Structure
Concepts
  • How It Works
  • Dev Mode
  • Build Mode
Elements
  • HTML Elements
  • Conditional Rendering
  • Events
CSS
  • CSS Properties
  • Animations
  • Transitions
  • Transforms
  • Flexbox
  • Tailwind CSS
JavaScript
  • Overview
  • State
  • Effects
  • Async & Networking
  • Runtime Types
Guides
  • C++ / JSX Interop
  • Custom C++ Nodes
  • Dynamic Styles
CLI
  • CLI Commands
Examples
  • Calculator
  • Dynamic
  • IP Checker
← All docs
Fetching documentation…
Morphby Levizr
GitHubDocsLicense

Calculator

A native calculator with dynamic layout and themed UI.

Files

File Description
src/App.mx JSX template with layout, state, buttons
src/style.css Animations and component styles
morph.config.json Window size (400×600), entry point

Features Demonstrated

  • morphState for expression, result, and theme
  • CSS @keyframes for animations (fade, slide, glow)
  • Transition + keyframe style swap on theme toggle
  • Ternary theme classes + inline reactive styles
  • Grid-based button layout with Tailwind utilities
  • Imported native C++ function (mathFn) from native.cpp
  • Expression parser written in C++ called from JSX event handlers

Run

morph run

See the full README for more details.

← PreviousCLI CommandsNext →Dynamic