# The Songcode Studio > The Studio is where a song is written, played and mixed. What each part of it is called and what it does. The Songcode Studio is the app at studio.songco.de: one window where you compose a song, read and edit its ode, mix its stems and play it, with the [Songcode Audio Engine](https://docs.songco.de/audio-engine/) making the sound. Everything happens in that window. The top bar holds the transport and the track's actions. Below it are up to three panels: the library, the composer and the stage. ![The Studio with the library open and a finished loop. The numbers match the list below.](https://docs.songco.de/img/tour.webp) 1. **Library button.** Opens and closes the library panel. 2. **Transport.** Play and pause, stop, the track's title, the metronome and tempo, the bar and beat, the clock, the level meter and the volume. The line along its bottom edge is the track's length; click or drag it to move through the track. See [play a track](https://docs.songco.de/app/playback/). 3. **Track actions.** **publish**, **download**, and a **…** menu with **copy code**. A published track also shows its link here. The buttons carry their names only when the window is wide enough to fit them; otherwise they are icons, and hovering one shows its name. See [drafts and publishing](https://docs.songco.de/app/save-and-share/) and [download and export](https://docs.songco.de/app/export/). 4. **Settings, key, about, Discord and feedback.** The person opens the [dashboard](https://docs.songco.de/dashboard/): your overview, account, look, usage, plans, referrals and keys. The key opens the [API key sheet](https://docs.songco.de/app/models-and-keys/); a dot on it means no key is saved yet. The info icon opens a short description of Songcode with the main shortcuts. The Discord icon opens the [Songcode Discord](https://docs.songco.de/help/feedback/#the-discord) in a new tab. The speech bubble [sends feedback](https://docs.songco.de/help/feedback/). 5. **Library.** Your drafts and published tracks. Click one to open it. See [the library](https://docs.songco.de/app/library/). 6. **Composer.** The prompt, the genre, the length, the model, the [advanced controls](https://docs.songco.de/app/advanced/) and the **generate** button. See [compose a track](https://docs.songco.de/app/compose/). 7. **View switch.** **code** shows the track as text. **stems** shows the same track as a mixer and note editor. Both views edit the same track, and the app remembers which one you used last. 8. **Stage.** The track itself: the [code editor](https://docs.songco.de/app/code/) or the [stems view](https://docs.songco.de/app/stems/). 9. **Status line.** What the app is doing or has just done: generating, checking, playing, an error. When something goes wrong, the reason is here. ![The five icons at the right end of the top bar.](https://docs.songco.de/img/top-icons.webp) ## The first-visit tour The first time you open the Studio in a browser, it walks you through the window by itself. A card sits beside one part of the window at a time, that part stays lit, and the rest dims. ![The tour on its third step, beside the model picker.](https://docs.songco.de/img/first-visit-model.webp) It has 6 steps, and they say: 1. **describe a track.** say what you want to hear in plain words: a mood, a tempo, a few instruments. one line is enough. 2. **pick a genre and a length.** the genre sets the tempo range, the drum kit and the conventions. a loop is a few bars that repeat without a seam. full is a whole track. 3. **choose a model.** free with your own key. your provider bills you for what the model uses, and we add nothing on top. add a key here, then pick fast, balanced or best. 4. **generate.** the model writes the track as code while you watch. `⌘↵` does the same. 5. **the track is code.** it lands here as a short program. change a value, press update, and the edit plays without stopping. stems shows the same track as a mixer. 6. **play, publish, share.** space plays and pauses. every track is kept as a draft as you work. publish gives it a link to send. download renders a wav or an mp3 in your browser. **next** and **back** move through the steps, and so do `→` and `←`. The dots at the bottom left of the card show how far along you are. The **×** closes the tour, and so does `esc`. The last step's button says **done**, and it leaves the cursor in the prompt. The tour only points. Nothing in the window changes while it is up, and the window does not take clicks until the tour is closed. It shows once per browser, and only when there is nothing else to look at: on the empty editor, with no sheet open, and not on a shared track's page. A browser that already has a key saved does not get it at all. To see it again, open the about card and click **tour**. ## Resize the panels Drag the border between the library and the composer, or between the composer and the stage, to make a panel wider or narrower. The widths are remembered in this browser. The borders also take the keyboard: focus one with `tab` and nudge it with the arrow keys, or hold `shift` for bigger steps. In the stems view, the border between the tracks and the note editor drags the same way. ## The about card The info icon at the top right opens a card that says what Songcode is in three sentences and lists the three shortcuts used most: `space` to play and pause, `⌘↵` to generate, `⌘S` to save the draft. All of them are on the [shortcuts](https://docs.songco.de/help/shortcuts/) page. The last line of the card links to these docs and to the [Discord](https://docs.songco.de/help/feedback/#the-discord), and its **tour** link replays [the first-visit tour](https://docs.songco.de/app/#the-first-visit-tour). ![The about card.](https://docs.songco.de/img/about.webp) ## Sheets, menus and tips A sheet (the key sheet, the about card, the feedback sheet) closes with its **×**, with `esc`, or with a click outside it. A menu closes the same way. Most buttons show a short tip with their shortcut when the pointer rests on them. ## On a small screen Below 760 pixels wide the panels do not fit side by side, and the window shows one at a time. See [phones and small screens](https://docs.songco.de/app/small-screens/). --- This page on the web: https://docs.songco.de/app/ Every page of the Songcode docs, for agents: https://docs.songco.de/llms.txt (index) and https://docs.songco.de/llms-full.txt (all of it in one file).