---
title: "Slidev Studio: visuell Slidev-editor | Daniel Christensen"
description: "Gratis og åpen editor for Slidev. Velg, dra, skaler og animer elementer rett på lerretet, mens presentasjonen forblir en vanlig Markdown-fil."
canonical_url: "https://danielchristensen.no/verktoy/slidev-studio"
last_updated: "2026-09-07T12:00:01.581Z"
locale: nb
meta:
  "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:image": "https://danielchristensen.no/_og/d/c_Default%2Ctitle_Slidev%2BStudio%2Csubtitle_Visuell%2Beditor%2Bfor%2BSlidev%2Ctagline_~RXRpc2sgaGFja2VyIMK3IEZvcmVkcmFnc2hvbGRlcg%2Cp_Ii92ZXJrdG95L3NsaWRldi1zdHVkaW8i%2Cs_7YFgYBdaZNz36wJk.png"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Slidev Studio: visuell Slidev-editor"
  "twitter:image": "https://danielchristensen.no/_og/d/c_Default%2Ctitle_Slidev%2BStudio%2Csubtitle_Visuell%2Beditor%2Bfor%2BSlidev%2Ctagline_~RXRpc2sgaGFja2VyIMK3IEZvcmVkcmFnc2hvbGRlcg%2Cp_Ii92ZXJrdG95L3NsaWRldi1zdHVkaW8i%2Cs_7YFgYBdaZNz36wJk.png"
---

> Index of every page on this site: [llms.txt](https://danielchristensen.no/llms.txt)

Å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)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://danielchristensen.no/#website","@type":"WebSite","description":"Etisk hacker og foredragsholder i Oslo. Foredrag om digital sikkerhet, pentesting og hvordan dere unngår å bli hacket, for skoler og bedrifter i hele Norge.","inLanguage":"nb-NO","name":"Daniel Christensen","url":"https://danielchristensen.no/","publisher":{"@id":"https://danielchristensen.no/#identity"},"workTranslation":{"@id":"https://danielchristensen.no/en#website"}},{"@id":"https://danielchristensen.no/verktoy/slidev-studio#webpage","@type":"WebPage","description":"Gratis og åpen editor for Slidev. Velg, dra, skaler og animer elementer rett på lerretet, mens presentasjonen forblir en vanlig Markdown-fil.","name":"Slidev Studio: visuell Slidev-editor","url":"https://danielchristensen.no/verktoy/slidev-studio","breadcrumb":{"@id":"https://danielchristensen.no/verktoy/slidev-studio#/schema/breadcrumb-list/#breadcrumb"},"isPartOf":{"@id":"https://danielchristensen.no/#website"},"mainEntity":{"@id":"https://danielchristensen.no/verktoy/slidev-studio#code"},"potentialAction":[{"@type":"ReadAction","target":["https://danielchristensen.no/verktoy/slidev-studio"]}]},{"@id":"https://danielchristensen.no/#identity","@type":"Person","alternateName":"BobTheShoplifter","description":"Etisk hacker, foredragsholder og innholdsskaper (BobTheShoplifter). Foredrag om digital sikkerhet og pentesting.","name":"Daniel Christensen","url":"https://danielchristensen.no","address":{"@type":"PostalAddress","addressLocality":"Oslo","addressRegion":"Oslo","addressCountry":"NO"},"contactPoint":{"@type":"ContactPoint","telephone":"+4798332280","email":"daniel@websecured.io","contactType":"booking","areaServed":"NO","availableLanguage":["nb","en"]},"image":{"@id":"https://danielchristensen.no/#/schema/image/1"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"FollowAction"},"userInteractionCount":130500},"jobTitle":["Etisk hacker","Foredragsholder","Innholdsskaper"],"knowsAbout":["Digital sikkerhet","Cybersikkerhet","Etisk hacking","Penetrasjonstesting","Sosial manipulering","Svindel og phishing"],"sameAs":["https://www.wikidata.org/wiki/Q109401760","https://www.tiktok.com/@bobtheshoplifter","https://www.instagram.com/bobtheshoplifter","https://www.youtube.com/channel/UCp2mLClUy4kwbg_uUWbR_5w","https://www.linkedin.com/in/-daniel-/","https://twitter.com/BobTShoplifter","https://www.facebook.com/daniel.christensen.5648/"],"worksFor":{"@type":"Organization","name":"Websecured","url":"https://websecured.io"}},{"@id":"https://danielchristensen.no/verktoy/slidev-studio#/schema/breadcrumb-list/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Hjem","item":"https://danielchristensen.no/","position":1},{"@type":"ListItem","name":"Verktøy","item":"https://danielchristensen.no/verktoy","position":2},{"@type":"ListItem","name":"Slidev Studio","item":"https://danielchristensen.no/verktoy/slidev-studio","position":3}]},{"@id":"https://danielchristensen.no/verktoy/slidev-studio#code","@type":"SoftwareSourceCode","codeRepository":"https://github.com/BobTheShoplifter/slidev-addon-studio","description":"Gratis og åpen editor for Slidev. Velg, dra, skaler og animer elementer rett på lerretet, mens presentasjonen forblir en vanlig Markdown-fil.","inLanguage":"nb-NO","isAccessibleForFree":true,"license":"https://opensource.org/license/mit","name":"slidev-addon-studio","programmingLanguage":"TypeScript","runtimePlatform":"Node.js","url":"https://danielchristensen.no/verktoy/slidev-studio","author":{"@id":"https://danielchristensen.no/#identity"}},{"@id":"https://danielchristensen.no/#/schema/image/1","@type":"ImageObject","contentUrl":"https://danielchristensen.no/assets/photos/daniel-portrait.jpg","inLanguage":"nb-NO","url":"https://danielchristensen.no/assets/photos/daniel-portrait.jpg"}]}
```

## Sitemap

See the full [sitemap](https://danielchristensen.no/sitemap.md) for all pages.