--- title: "Slidev Studio: visuell editor for Slidev (åpen kildekode) | Daniel Christensen" canonical_url: "https://danielchristensen.no/verktoy/slidev-studio" last_updated: "2026-09-02T13:50:00.439Z" locale: nb meta: description: "Gratis og åpen editor for Slidev. Velg, dra, skaler og animer elementer rett på lerretet, mens presentasjonen forblir en vanlig Markdown-fil." "og:description": "Gratis og åpen editor for Slidev. Velg, dra, skaler og animer elementer rett på lerretet, mens presentasjonen forblir en vanlig Markdown-fil." "og:title": "Slidev Studio: visuell editor for Slidev (åpen kildekode)" --- Åpen kildekode · Slidev # Slidev Studio En visuell editor for Slidev. Velg, dra, skaler, animer og sett sammen slides rett på lerretet, slik du ville gjort det i Keynote eller PowerPoint, mens presentasjonen forblir det den var: en Markdown-fil. [Se på GitHub →](https://github.com/BobTheShoplifter/slidev-addon-studio) ![Slidev Studio åpen på en slide, med en komponent valgt. Element-panelet viser propsene, klassene og Markdown-linja den kom fra.](https://danielchristensen.no/_ipx/f_webp&q_90&s_1440x810/assets/slidev-studio-shot.png) ## Hvorfor jeg lagde det Jeg er lei av PowerPoint. Ikke av å klikke ting på plass, det går fort, og det er ofte den raskeste måten å få en slide til å se riktig ut på. Jeg er lei av alt det andre: en binærfil ingen kan lese en diff på, fonter som ser forskjellige ut fra maskin til maskin, filer som heter endelig2.pptx, og at ingenting av det ligger i git sammen med resten av jobben min. Så jeg gikk over til Slidev, og fikk alt det tilbake. Presentasjonen er en tekstfil, den kan reviewes, kodeblokkene er ekte kode, og jeg kan gjenbruke komponenter mellom foredrag. Men jeg mistet lerretet. Skal en boks 20 piksler til høyre, må du gjette et tall, lagre, se på resultatet og gjette igjen. Studio er forsøket på å slippe å velge. Grensesnittet når jeg skal plassere noe, teksten når jeg skal se hva som faktisk ble endret. Jeg vil ha farten fra PowerPoint uten å gi fra meg fila. ## Markdown er fasiten Hver handling i Studio er en liten, lesbar endring i .md-fila. Det finnes ikke noe prosjektformat, ingen database og ingen innlåsing. Lukker du editoren, er diffen noe du kunne skrevet for hånd. Den begrensningen er hele poenget: det er nettopp den som gjør at en visuell editor kan leve side om side med versjonskontroll, code review og vanlig tekstredigering. ## Dra, og se hva som skjer i fila Klikk på hva som helst på sliden. Studio sporer elementet tilbake til linjene i Markdown det kom fra, og viser dem i Element-panelet. Drar du blokka, går den ut av tekstflyten og får en fast plassering. Studio skriver plasseringen inn i fila for deg, som fire tall: hvor langt fra venstre, hvor langt ned, og hvor bred og høy blokka skal være. Vil du ha den tilbake i flyten, er det én knapp i panelet. Mens du drar, snapper elementet mot kantene på sliden, mot midten og mot tredjedelene, og mot alt annet som ligger der fra før. Holder du Alt, slås snappingen av og du plasserer helt fritt. ![En blokk dratt ut i det tomme feltet på sliden, med markeringsramme og håndtak rundt seg.](https://danielchristensen.no/_ipx/f_webp&q_90&s_1440x810/assets/slidev-studio-drag.png) ## Rediger teksten der den står Dobbeltklikk en blokk, så blir den redigerbar der den står, med en verktøylinje for fet, kursiv, kode, gjennomstreking, lenker, overskrifter, lister og sitater. Du slipper å lete opp linja i fila for å rette en skrivefeil. ![Et avsnitt som redigeres på sliden, med en formateringslinje over seg.](https://danielchristensen.no/_ipx/f_webp&q_90&s_1440x810/assets/slidev-studio-inline.png) ## Hva den gjør Element-panelet er det du så lenger opp: det sporer markeringen tilbake til Markdown og lar deg redigere den. De fire andre gjør resten. I Assets-panelet slipper du bilder rett i public/ og setter dem inn. ![Components: Markdown-basisen pluss alle komponenter decket kan bruke, hver med en levende forhåndsvisning av seg selv.](https://danielchristensen.no/_ipx/f_webp&q_85&s_1280x720/assets/slidev-studio-components.png)*Components: Markdown-basisen pluss alle komponenter decket kan bruke, hver med en levende forhåndsvisning av seg selv.* ![Animate: klikksteg, vis og skjul, entrance-animasjoner og overganger, uten å måtte huske hvilket direktiv som het hva.](https://danielchristensen.no/_ipx/f_webp&q_85&s_1280x720/assets/slidev-studio-animate.png)*Animate: klikksteg, vis og skjul, entrance-animasjoner og overganger, uten å måtte huske hvilket direktiv som het hva.* ![Layout: hver layout med miniatyr som rendrer din egen slide, pluss frontmatter-nøklene den layouten faktisk leser.](https://danielchristensen.no/_ipx/f_webp&q_85&s_1280x720/assets/slidev-studio-layout.png)*Layout: hver layout med miniatyr som rendrer din egen slide, pluss frontmatter-nøklene den layouten faktisk leser.* ![Slides: levende miniatyrer av hele decket. Dra for å endre rekkefølge, legg til, dupliser og slett.](https://danielchristensen.no/_ipx/f_webp&q_85&s_1280x720/assets/slidev-studio-slides.png)*Slides: levende miniatyrer av hele decket. Dra for å endre rekkefølge, legg til, dupliser og slett.* ## Kom i gang Installer addonet og slå det på i headmatteren til decket ditt, eller i package.json om du vil ha det i alle deckene i prosjektet. ``` pnpm add -D slidev-addon-studio ``` ``` --- addons: - slidev-addon-studio --- ``` Start slidev som vanlig og trykk E, eller bruk blyantknappen i verktøylinja nederst. Studio legger ingenting på sliden så lenge editoren er lukket. Foredrag ## Alle foredragene mine er bygget i Slidev Studio ble til fordi jeg holder mange foredrag og ville ha raskere slides uten å gi fra meg Markdown. Vil du ha meg på scenen, ta kontakt. [Se foredragene →](https://danielchristensen.no/foredrag)