# Docs Build your first app with the Noya SDK. Publish static sites on Noya’s global CDN. ## Developer - [Overview](https://www.noya.io/docs/md/developer.mdx): > If you're using an LLM, you can point it to our llms.txt index file or combined markdown page for the full documentation. - [Quick Start](https://www.noya.io/docs/md/developer/quick-start.mdx): Prerequisites: node.js 20+, git - [Rendering](https://www.noya.io/docs/md/developer/rendering.mdx): Noya's graphics packages let you describe a scene with React components such as Group, Rectangle, Path, Text, and Image, then choose how that scene is rendered. - [Markdown Editor](https://www.noya.io/docs/md/developer/markdown-editor.mdx): @noya-app/markdown-editor is a ready‑to‑use markdown renderer and editor component for React apps. A value prop is all you need to get full rich text rendering, and an onChange prop is all you need to get a full editing experience. ### App SDK - [App SDK](https://www.noya.io/docs/md/developer/sdk.mdx): The App SDK section covers all the essentials you need to know to build on Noya. - [Schema](https://www.noya.io/docs/md/developer/sdk/schema.mdx): A schema defines the structure of the data that an app saves to a Noya file. Noya uses Typebox for schema creation. - [State Management](https://www.noya.io/docs/md/developer/sdk/state.mdx): Noya synchronizes a shared JSON state between all users of a Noya file. State in a Noya app is typically stored in 3 places: - [Local Storage](https://www.noya.io/docs/md/developer/sdk/local-storage.mdx): Embedded apps run on a different origin from the Noya host. Saving preferences to the iframe's window.localStorage ties them to that deployment origin, so the data is lost when a new deployment uses a different domain. - [Workspace](https://www.noya.io/docs/md/developer/sdk/workspace.mdx): Workspace is the standard application shell for Noya tools. It combines a menu-driven toolbar, optional left and right sidebars, responsive panel or drawer behavior, upload progress, loading states, dialogs, and a command palette. - [TypeScript](https://www.noya.io/docs/md/developer/sdk/typing.mdx): For strong TypeScript support, augment the open Noya interface to describe your app’s state, menu actions, history metadata, and shared connection data (e.g. cursors and selections). This gives you end‑to‑end types in hooks like useNoyaState and useNoyaMenu. - [Users](https://www.noya.io/docs/md/developer/sdk/users.mdx): Noya keeps track of everyone who has opened the Noya file. Each MultiplayerUser includes an id, an optional name, and an optional image. Use the user hooks to render presence, avatar stacks, or ownership indicators. - [Undo / Redo](https://www.noya.io/docs/md/developer/sdk/undo.mdx): Noya includes a built-in undo/redo system that tracks changes made through state updates. Use the useNoyaUndoManager hook to access undo/redo actions and flags for enabling or disabling UI. - [Inspector](https://www.noya.io/docs/md/developer/sdk/inspector.mdx): Inspector renders an editable UI for your JSON-like state directly from a schema. Use the top‑level component — pass a value, onChange, and a Type schema. No custom children are required; the inspector automatically lays out sections, objects, arrays, unions, and primitives. Top‑level sections that contain nested fields (objects/records or unions that resolve to them) are separated by dividers for readability. - [Assets](https://www.noya.io/docs/md/developer/sdk/assets.mdx): Noya provides a binary asset upload API. The assets are synced between all users in the same Noya file. - [Resource Picker](https://www.noya.io/docs/md/developer/sdk/resource-picker.mdx): The resource picker lets an embedded app ask its host to choose or upload an image. The current API is image-specific, so its public method is named pickImage. - [Image Transforms](https://www.noya.io/docs/md/developer/sdk/image-transforms.mdx): Image transforms generate preview images from Noya files. A transform is a bundled JavaScript function that receives the current document and its assets, then returns an image. - [Menus](https://www.noya.io/docs/md/developer/sdk/menus.mdx): Use useNoyaMenu to configure the global toolbar menus in your app. Provide arrays of menu items for the left and right sides of the toolbar, and handle selections in a single callback. - [Transcription](https://www.noya.io/docs/md/developer/sdk/transcription.mdx): You can transcribe audio/video files directly inside your app using the Whisper model. - [Server Scripts](https://www.noya.io/docs/md/developer/sdk/server-scripts.mdx): Server scripts let your app run trusted JavaScript inside the multiplayer server (Cloudflare Durable Object). They're ideal for simulations, scheduled tasks, or server-side validations that should update the shared document without relying on an individual connected user. - [AI](https://www.noya.io/docs/md/developer/sdk/ai.mdx): On noya.io, generation APIs are available to signed-in users and requests from anonymous users are rejected. Callers can optionally select a model for each request. - [Script evaluator](https://www.noya.io/docs/md/developer/sdk/evaluator.mdx): The script evaluator runs modules in the same hosted evaluator used by Noya workflows. It is available to callers with write access on noya.io, including public write-access files, and is not available in local mode. ### Game SDK - [Game SDK](https://www.noya.io/docs/md/developer/game-sdk.mdx): The Game SDK adds an authoritative multiplayer game model to a Noya app. It provides: - [Sessions and Lobbies](https://www.noya.io/docs/md/developer/game-sdk/sessions.mdx): Every game document has a server-owned $game session: - [Discrete Actions](https://www.noya.io/docs/md/developer/game-sdk/actions.mdx): Use discrete actions for ordered, server-authoritative events: place a piece, play a card, choose an answer, or buy an item. Each action has a unique ID and can require the document's current action revision. - [Realtime Games](https://www.noya.io/docs/md/developer/game-sdk/realtime.mdx): Realtime games send a sequenced stream of player input to a server-authoritative simulation. The server validates each input, advances the simulation, and publishes frames. Clients render a delayed or predicted timeline to hide network jitter. - [React Integration](https://www.noya.io/docs/md/developer/game-sdk/react.mdx): @noya-app/react-game-sdk re-exports the framework-neutral Game SDK and adds React subscriptions, command senders, lobby UI, controls, and render-loop helpers. - [Advanced Utilities](https://www.noya.io/docs/md/developer/game-sdk/advanced.mdx): Most games only need sessions plus discrete or realtime input. The framework-neutral package also exposes lower-level building blocks for deterministic fixed-step simulations, prediction, rollback, replay, wrapped worlds, and performance tests. ### Component Kit - [Component Kit](https://www.noya.io/docs/md/developer/component-kit.mdx): The Component Kit documents the reusable UI components available via @noya-app/react-sdk (which re‑exports the design system). Use these components to compose app UIs that match Noya’s look and feel. #### Collections and Layout - [Collections and Layout](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout.mdx): Components for presenting large or structured data sets and arranging scrollable, draggable, or resizable regions: - [DraggableMenuButton](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/draggable-menu-button.mdx): DraggableMenuButton is a compact handle that distinguishes a click from a drag. A click opens an optional dropdown menu; pointer movement leaves the gesture available to a parent Sortable. - [GridView](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/grid-view.mdx): GridView is the composable primitive underneath Grid. Use it for responsive tile layouts that need custom item content, sections, context menus, loading states, or text placement. - [ListView](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/list-view.mdx): ListView is the composable primitive underneath List. Use it when each row needs custom markup or when you need direct control over sections, variants, keyboard behavior, row context menus, or drag indicators. - [List and Collection](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/list.mdx): List renders a data-driven, accessible list with selection, thumbnails, details, row actions, renaming, empty states, and optional sorting. Collection accepts the same props and switches between List and Grid with viewType. - [ResizableContainer](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/resizable-container.mdx): ResizableContainer adds a horizontal pointer-drag handle to its content. Use it for preview panes, sidebars, and other regions whose width should stay between known bounds. - [ScrollArea](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/scroll-area.mdx): ScrollArea provides Noya-styled scrollbars that appear while the user hovers or scrolls. It supports vertical, horizontal, or two-axis scrolling while keeping content and the native viewport available to assistive technology. - [Shared Dragging](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/shared-dragging.mdx): createSharedDrag() creates an isolated drag-and-drop scope whose lists can exchange items even when they are rendered by different components. It returns: - [Sortable](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/sortable.mdx): Sortable adds pointer-driven reordering to arbitrary React elements. It manages drag sensors, collision detection, an optional overlay, and "above", "below", or "inside" drop positions. Your application remains responsible for updating its data in onMoveItem. - [TreeView](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/tree-view.mdx): TreeView adds disclosure chevrons and icons to the ListView primitives. It renders a flat array with a depth per row; your application owns the nested data, expanded state, and visible-row flattening. - [Virtualized](https://www.noya.io/docs/md/developer/component-kit/collections-and-layout/virtualized.mdx): Virtualized renders only rows near the visible viewport. Use it for large collections with known row heights. It supports variable heights, overscan, gaps, padding, sticky rows, imperative scrolling, and either native overflow or ScrollArea. #### Controls - [Controls](https://www.noya.io/docs/md/developer/component-kit/controls.mdx): Buttons, inputs, and other form controls: - [Button](https://www.noya.io/docs/md/developer/component-kit/controls/button.mdx): Buttons trigger actions and can include icons, variants, and sizes. - [Checkbox](https://www.noya.io/docs/md/developer/component-kit/controls/checkbox.mdx): Checkbox toggles a boolean value. - [Editable Text](https://www.noya.io/docs/md/developer/component-kit/controls/editable-text.mdx): Editable Text switches a text label into an input when it is clicked or focused and activated from the keyboard. It is useful for inline renaming. - [Emoji Picker](https://www.noya.io/docs/md/developer/component-kit/controls/emoji-picker.mdx): Emoji Picker provides search, category navigation, keyboard navigation, frequently used emojis, and a persistent skin-tone preference. - [Icon Button](https://www.noya.io/docs/md/developer/component-kit/controls/icon-button.mdx): An Icon Button is a compact button that only displays an icon, ideal for toolbars. - [Input Field](https://www.noya.io/docs/md/developer/component-kit/controls/input-field.mdx): Input Field composes a labeled text input with optional start/end adornments and attached menus. - [Segmented Control](https://www.noya.io/docs/md/developer/component-kit/controls/segmented-control.mdx): Segmented Control switches between a small set of options. - [Slider](https://www.noya.io/docs/md/developer/component-kit/controls/slider.mdx): Slider lets users adjust a numeric value within a range. - [Stepper](https://www.noya.io/docs/md/developer/component-kit/controls/stepper.mdx): Stepper combines a number input with decrement and increment buttons. Use it for bounded numeric values that people adjust in small steps. - [Switch](https://www.noya.io/docs/md/developer/component-kit/controls/switch.mdx): Switch is a binary on/off control. - [Text Area](https://www.noya.io/docs/md/developer/component-kit/controls/text-area.mdx): Text Area captures multi‑line text with optional auto‑resize. #### Display - [Display](https://www.noya.io/docs/md/developer/component-kit/display.mdx): Visual indicators and small identity elements: - [Avatar](https://www.noya.io/docs/md/developer/component-kit/display/avatar.mdx): Avatar displays a user’s image or a monogram fallback, with optional stacks. - [Banner](https://www.noya.io/docs/md/developer/component-kit/display/banner.mdx): Banner presents empty states, informational messages, and errors in a compact inline surface. - [Card](https://www.noya.io/docs/md/developer/component-kit/display/card.mdx): Card is a bordered, padded container for grouping related content. - [Chip](https://www.noya.io/docs/md/developer/component-kit/display/chip.mdx): Chip displays small, rounded labels for tags, statuses, or filters. - [Media Thumbnail](https://www.noya.io/docs/md/developer/component-kit/display/media-thumbnail.mdx): Media Thumbnail renders a consistent square preview for images, media types, files, and custom collection items. - [Progress](https://www.noya.io/docs/md/developer/component-kit/display/progress.mdx): Progress shows a linear progress indicator. - [Ring Progress](https://www.noya.io/docs/md/developer/component-kit/display/ring-progress.mdx): Ring Progress shows a circular progress indicator. - [Stat Card](https://www.noya.io/docs/md/developer/component-kit/display/stat-card.mdx): StatCard highlights a metric with an optional icon and change indicator. - [Typography](https://www.noya.io/docs/md/developer/component-kit/display/typography.mdx): The typography components apply Noya’s type scale, semantic HTML, and theme colors consistently. #### Menus - [Menus](https://www.noya.io/docs/md/developer/component-kit/menus.mdx): Use these components to present lists of actions or choices. This category includes: - [Action Menu](https://www.noya.io/docs/md/developer/component-kit/menus/action-menu.mdx): Action Menu is a compact overflow menu with a standard vertical-dots trigger. Use it for contextual actions on rows, cards, and collection items. - [Combobox](https://www.noya.io/docs/md/developer/component-kit/menus/combobox.mdx): Combobox combines text input with typeahead suggestions and keyboard navigation. - [Context Menu](https://www.noya.io/docs/md/developer/component-kit/menus/context-menu.mdx): Context Menu opens on right‑click or long‑press over an area. - [Dropdown Menu](https://www.noya.io/docs/md/developer/component-kit/menus/dropdown-menu.mdx): Dropdown Menu provides a button trigger that opens a menu of actions. - [List Menu](https://www.noya.io/docs/md/developer/component-kit/menus/list-menu.mdx): List Menu renders an always-visible list of actions or choices. It is suited to sidebars, settings panels, and drill-down navigation rather than anchored dropdowns. - [Select Menu](https://www.noya.io/docs/md/developer/component-kit/menus/select-menu.mdx): Select Menu lets users pick a single option from a list. #### Navigation - [Navigation](https://www.noya.io/docs/md/developer/component-kit/navigation.mdx): Components for navigating and organizing content structure: - [Breadcrumbs](https://www.noya.io/docs/md/developer/component-kit/navigation/breadcrumbs.mdx): Breadcrumbs show the page’s location in a hierarchy and let users navigate up the tree. - [Dialog Navigator](https://www.noya.io/docs/md/developer/component-kit/navigation/dialog-navigator.mdx): Dialog Navigator combines a modal dialog with typed, stack-based navigation. Use it for multi-step pickers and flows that need built-in headers, back navigation, and closing behavior. - [Navigator](https://www.noya.io/docs/md/developer/component-kit/navigation/navigator.mdx): Navigator manages a stack of screens with animated transitions and a header. Use createNavigator to define route names and their parameters, then register each route with a screen. - [Section](https://www.noya.io/docs/md/developer/component-kit/navigation/section.mdx): Section groups related content with a header and optional actions. - [Tabs](https://www.noya.io/docs/md/developer/component-kit/navigation/tabs.mdx): Tabs display content panels for each tab item. - [Toolbar](https://www.noya.io/docs/md/developer/component-kit/navigation/toolbar.mdx): Toolbar groups controls in a floating popover surface. It provides consistent padding, spacing, background, shadow, and transparent button and input backgrounds. Position the toolbar in the consuming application. #### Overlays - [Overlays](https://www.noya.io/docs/md/developer/component-kit/overlays.mdx): Transient surfaces that display content above the main UI: - [Dialog](https://www.noya.io/docs/md/developer/component-kit/overlays/dialog.mdx): Dialog is a modal that focuses user attention for tasks or confirmation. - [Popover](https://www.noya.io/docs/md/developer/component-kit/overlays/popover.mdx): Popover displays contextual content next to a trigger. - [Toast](https://www.noya.io/docs/md/developer/component-kit/overlays/toast.mdx): Toast displays transient notifications in the corner of the screen. Wrap your app in ToastProvider. - [Tooltip](https://www.noya.io/docs/md/developer/component-kit/overlays/tooltip.mdx): Tooltip shows a small label when hovering or focusing an element. ### Canvas - [Canvas](https://www.noya.io/docs/md/developer/canvas.mdx): @noya-app/noya-infinite-canvas powers every infinite canvas experience in Noya. It provides the surface, a strongly-typed plugin system for handling pointer + keyboard input, and utility components for rendering handles, selections, gradient editors, and snap lines. Use it any time you need a panning + zooming workspace. #### Canvas Components - [Canvas Components](https://www.noya.io/docs/md/developer/canvas/components.mdx): Need to render handles, marquees, or snap lines on top of your canvas? @noya-app/noya-infinite-canvas ships a tiny overlay library that reads the same ReactCanvas context as your plugins. Each component can either infer state from the nearest provider or accept props for full control. - [DragHandles](https://www.noya.io/docs/md/developer/canvas/components/drag-handles.mdx): Shows resize handles around the current selection. Pair it with scalePlugin so users can see which handle they’re hovering or dragging. - [GradientHandles](https://www.noya.io/docs/md/developer/canvas/components/gradient-handles.mdx): Visualizes the gradient start/end line and draggable stop handles used by gradientEditorPlugin. - [Marquee](https://www.noya.io/docs/md/developer/canvas/components/marquee.mdx): Visualizes the marquee rectangle produced by marqueePlugin. It automatically reads the current canvas mode and zoom so you don’t have to wire anything. - [PointHandles](https://www.noya.io/docs/md/developer/canvas/components/point-handles.mdx): Draws draggable handles for the points registered with pointPlugin. Supply the normalized point locations and their path bounds; the component converts them into canvas coordinates and keeps them aligned with zoom changes. - [SelectionRect](https://www.noya.io/docs/md/developer/canvas/components/selection-rect.mdx): Outlined rectangle that snaps to the same zoom/origin as your canvas. It’s typically paired with selectPlugin to show the union of selected shapes. - [SnapLines](https://www.noya.io/docs/md/developer/canvas/components/snap-lines.mdx): Renders the snap lines returned by helpers like getSnapLines or getMoveSnapDelta. Lines automatically scale their stroke width to stay crisp at any zoom level. #### Plugins - [Plugins](https://www.noya.io/docs/md/developer/canvas/plugins.mdx): Noya Infinite Canvas provides a plugin system for extending the canvas with custom behavior. - [Double Click Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/double-click.mdx): Detects double-clicks on elements and forwards the element ID to a callback so you can toggle modes (e.g., enter text editing). - [Drawing Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/drawing.mdx): Turns pointer drags into drawn regions or stroke points so you can create shapes, paths, or scribbles. - [Edit Text Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/edit-text.mdx): Switches the canvas into inline text-editing mode (double-click by default) and proxies pointer events to your text renderer. - [Eraser Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/eraser.mdx): Implements a drag-to-erase gesture that collects element IDs under the pointer and notifies your app when the gesture ends. - [Focus Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/focus.mdx): Ensures the canvas' root element receives focus whenever the user clicks anywhere on the surface. This lets keyboard shortcuts continue working even if the user clicks on empty space or decorational overlays. - [Gradient Editor Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/gradient-editor.mdx): Adds draggable start/end handles and gradient stops for editing fills in place. It drives components like and exposes helpers to move stops. - [Highlight Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/highlight.mdx): Tracks which element is under the pointer so your renderer can show hover outlines or tooltips. - [Marquee Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/marquee.mdx): Provides click-drag marquee selection rectangles that sync with data.selectedElementIds. - [Move Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/move.mdx): Enables drag-to-move interactions for the current selection and exposes movement deltas to your reducer. - [Pan Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/pan.mdx): Adds space-bar panning and trackpad / mouse-wheel scrolling. This is the primary way pointer and keyboard users reposition the viewport. - [Point Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/point.mdx): Enables direct-manipulation of shape points (vector paths, gradient handles, etc.). It highlights the point under the cursor and emits drag deltas when the user drags a point handle. - [Pointer Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/pointer.mdx): Low-level helper that normalizes pointer events, click counts, and pointer capture state. The React canvas adds it automatically, but you can still customize its behavior via options or context callbacks. - [Scale Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/scale.mdx): Adds resize handles to the current selection and emits normalized scaling deltas. - [Select Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/select.mdx): Handles click-to-select (and shift-click multi-select) logic by populating data.selectedElementIds. - [Viewport Gesture Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/viewport-gesture.mdx): Adds two-finger touch panning and scaling. The gesture tracks the center and distance between two active touch pointers, allowing both viewport transforms at the same time. - [Zoom Plugin](https://www.noya.io/docs/md/developer/canvas/plugins/zoom.mdx): Adds keyboard + wheel based zoom controls and helper utilities like zoomIn, zoomOut, and zoomToFit. ## Sites - [Overview](https://www.noya.io/docs/md/sites.mdx): Noya Sites is a service for creating and managing (mostly) static websites. - [JSON transformation](https://www.noya.io/docs/md/sites/json-transformation.mdx): You can access data within a JSON file via url parameters. - [Thumbnail images](https://www.noya.io/docs/md/sites/thumbnail-images.mdx): You can render a thumbnail image of a file using the ?as=image parameter.