# Development JSX runtime
The development compiler emits jsxDEV calls with source-location metadata.

## APIs demonstrated

- [Fragment](/reference/overview/) from `@pibbl/core/jsx-dev-runtime`
- [jsxDEV](/reference/overview/) from `@pibbl/core/jsx-dev-runtime`
- [JSX](/reference/overview/) from `@pibbl/core/jsx-dev-runtime`

## Complete example

[Plain source](/minimal/compiler/development.ts). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```ts
import { Rectangle, Text, pibbl } from '@pibbl/core';
import { Fragment, jsxDEV, type JSX } from '@pibbl/core/jsx-dev-runtime';

const canvas = document.createElement('canvas');
canvas.width = 280;
canvas.height = 140;
document.body.append(canvas);

const source = { fileName: 'development.ts', lineNumber: 15, columnNumber: 3 };
const component: JSX.ElementType = Rectangle;
const background = jsxDEV(
  component,
  { style: { width: 280, height: 140, fill: '#0f766e' } },
  'background',
  false,
  source,
  undefined,
);
const label = jsxDEV(
  Text,
  { style: { left: 20, top: 48, font: '24px sans-serif', fill: '#fff' }, children: 'Development JSX' },
  'label',
  false,
  source,
  undefined,
);
const root = jsxDEV(
  Fragment,
  { children: [background, label] },
  undefined,
  true,
  source,
  undefined,
);
const controller = pibbl(canvas, root);
window.addEventListener('pagehide', () => controller.dispose(), { once: true });

```

## Usage notes

- Compiler output is shown explicitly for inspection; source metadata is included in development builds.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.