# Strand > Strand is a toolkit for Wayland shells: bars, launchers, lock screens and panels written in one small typed language. Values animate on springs, saving a file updates the running shell without restarting it, and an idle shell does no work. Every page below is markdown (the HTML page's address with `.md` added); [llms-full.txt](/llms-full.txt) is all of them in one file. Strand configs are `.strand` files; `strand check` checks one and `strand run` runs it. ## Start - [Install](/start/install.html.md): Strand has no packaged release yet. - [Running a shell](/start/running.html.md): This page is the day-to-day loop: make a shell, start it, edit it while it runs, and check it from a terminal. ## Guide - [Overview](/guide/index.html.md): This guide takes you from strand new to a full desktop shell in five levels. - [1. The hello bar](/guide/level-1.html.md): You learn: surfaces, nodes, props, and services as live values. - [2. Tokens and components](/guide/level-2.html.md): You learn: $tokens, component, for, when, on click. - [3. State and popups](/guide/level-3.html.md): You learn: state, <->, if, popup, enter. - [4. Surfaces that come and go](/guide/level-4.html.md): You learn: on change … after, after … while, persist, export, list, Async; also let, enum, match, every … while, on show, id:, @reset, lambdas (n => …), await… - [5. Your own theme and services](/guide/level-5.html.md): You learn: tokens, spring overrides ~, service from dbus, pages, drag and drop, shaders, file; also set { }, keyframes and play, canvas, type and key, slot… - [Plugins](/guide/plugins.html.md): Most services need no code: service … from dbus, from file, from dir, from listen and from poll (level 5) cover a D-Bus object, a file, a directory and a… ## How-to - [A bar with a calendar popup](/how-to/calendar-popup.html.md): A clock in the middle of the bar that opens a month calendar when you click it. - [An app launcher](/how-to/launcher.html.md): A search box in the middle of the screen that finds your apps as you type, best match first, and starts the one you pick. - [A notification stack](/how-to/notifications.html.md): Cards at the top right of the focused monitor, one per notification, that slide in when a notification arrives and out when it goes. - [A volume and brightness OSD](/how-to/osd.html.md): A pill near the bottom of the screen that shows the volume or the screen brightness when either changes, and fades away a moment after you stop. - [A theme from your wallpaper](/how-to/wallpaper-theme.html.md): Take every colour of the shell from your wallpaper, and follow it when the wallpaper changes. - [A settings file](/how-to/settings-file.html.md): Keep the choices of your shell in a plain TOML file that anyone can edit, with types, defaults and live updates, and change them from the shell itself or from… - [A D-Bus method or an action](/how-to/dbus-and-actions.html.md): Strand's built-in services cover the usual things. ## Concepts - [The language in brief](/concepts/language.html.md): A Strand shell is a directory of .strand files. - [State and reactivity](/concepts/state.html.md): Strand has three kinds of value. - [Tokens and theming](/concepts/theming.html.md): Colours, spacing, radii, fonts, shadows and springs are tokens, read as $name: bg: $surface, pad: $space.3, radius: $radius.lg. - [Layout](/concepts/layout.html.md): Strand lays nodes out with flexbox, as the web does: containers place their children in rows and columns, and sizes, growth and alignment are props. - [Motion](/concepts/motion.html.md): Every visual prop in Strand moves to its new value on a spring. - [Surfaces and monitors](/concepts/surfaces.html.md): A surface is something the compositor shows: a bar along an edge, a panel, an on-screen display, a popup, a window or the lock screen. - [Services](/concepts/services.html.md): A service is the system as values: the battery, the audio devices, the workspaces, the clock. - [Live reload](/concepts/live-reload.html.md): Saving a file is a change of state, not a restart. - [Performance](/concepts/performance.html.md): Strand aims to be fast when something moves and to cost nothing when nothing does. ## Tools - [Editor setup](/tools/editor.html.md): Strand's editor support is a language server and a tree-sitter grammar. - [The strand command](/tools/cli.html.md): Everything strand does is one of its commands: strand [args]. - [Inspector](/tools/inspector.html.md): The inspector shows what Strand knows about one element of your running shell: where it comes from in your files, where it was laid out, which tokens its props… - [Reporting a glitch](/tools/reporting.html.md): When something on screen looks wrong, such as a bar that dips for a frame or a popup that jumps, Strand can save what led up to it, replay it and cut out the… - [Playground](/playground.html.md): Every example on this site, running in your browser. ## Reference - [Elements](/reference/elements/index.html.md): Every element is written kind [positional] { props; children }. - [Services](/reference/services/index.html.md): A service is a live value: read it and the shell updates when it changes (spec.md, section 8.1). - [Types](/reference/types.html.md): The records, enums, aliases and opaque types of the builtin schema. - [Functions](/reference/functions.html.md): Builtin functions and values, every name in scope in every file, and the methods of the language's own types. - [Tokens](/reference/tokens.html.md): A token is read as $path (spec.md, section 9). ## Help - [Troubleshooting](/help/troubleshooting.html.md): Each section starts from what you see and says what to do.