Project Structure

When you run morph init my-app, Morph generates this project layout:

my-app/
├── src/
│   ├── App.mx            ← entry point (JSX + CSS + JS)
│   ├── style.css          ← stylesheet
│   └── env.d.ts           ← TypeScript declarations for editor support
├── node_modules/
│   └── morph/
│       └── index.d.ts     ← type definitions for morphState, morphEffect, CSS
├── morph.config.json      ← project configuration
├── tsconfig.json          ← TypeScript config (for editor linting)
└── dist/
    └── app                ← compiled binary (generated by morph build/run)

Key Files

`src/App.mx`

The entry point. An .mx file is a JSX-like format that combines your component logic and markup in a single file. The default export is the root component:

import { CSS, morphState } from 'morph'

CSS.load("./style.css")

export const windowConfig = { title: "My App", width: 800, height: 600 }

export default function App() {
  const [count, setCount] = morphState(0)
  return (
    <body>
      <h1>Hello from Morph</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </body>
  )
}

CSS.load("./style.css") — loads a stylesheet (intercepted by the compiler)
windowConfig — optional export that overrides morph.config.json window settings
export default function App() — the root component rendered into the window

`src/env.d.ts`

TypeScript declarations that let your editor understand .mx, .css, .cpp, and .h imports. You generally don't need to edit this file.

`morph.config.json`

Project configuration — window size, entry point, renderer, build options. See Configuration for the full reference.

`tsconfig.json`

Configures your editor's TypeScript language server for .mx files. Points jsxImportSource at the morph module so autocomplete works for morphState, morphEffect, etc. Don't edit unless you know what you're doing.

`node_modules/morph/`

Shipped with every project. Contains index.d.ts with type definitions for the Morph JS API (morphState, morphEffect, CSS.load, WindowConfig, etc.). The runtime index.js is a placeholder — all Morph code is compiled to native at build time.

Adding Files

Components

Create .mx files in src/ and import them:

src/
├── App.mx
├── components/
│   ├── Header.mx
│   └── Card.mx
└── style.css

// src/App.mx
import Header from './components/Header.mx'
import Card from './components/Card.mx'

CSS

Load stylesheets with CSS.load():

import { CSS } from 'morph'
CSS.load("./style.css")
CSS.load("./components/Header.css")

Custom C++ Code

Place .h or .cpp files in the project and reference them in morph.config.json:

{
  "cpp_sources": ["cpp/my_widget.h"]
}

Or import .cpp files directly in JSX for bidirectional C++/JSX interop — see C++ Interop.