DEV Community

Cover image for Adding a CSS playground to your Astro site with Svelte
Craig Holliday
Craig Holliday

Posted on

Adding a CSS playground to your Astro site with Svelte

I've recently updated my website using Astro. To continue experimenting with Astro, I added Svelte components to the site.

If you didn't know, Astro has integrations for React, Preact, Svelte, Vue, SolidJS, AlpineJS, and Lit (which is insane)

This means I can bring what I've been learning with Svelte straight into my new personal website without much hassle.

What I want to do

With this quick experiment, I want to:

  • Add the Svelte integration to my website
  • Use Monaco Editor to add code editors
  • Create two editors: one editor for CSS and one for HTML
  • Take the output from those editors and load them into an iFrame.

Let's do it

I'll go step by step and show the code I used because this was super easy to do.

Add the Svelte integration

If I put any info here, I would repeat the fantastic Astro documentation.

So, go to the fantastic documentation for this step

This was dead simple.

Add code editors with Monaco Editor

Monaco Editor was also relatively simple to add.

Add the NPM package:

npm install monaco-editor
Enter fullscreen mode Exit fullscreen mode

Then, write a little wrapper around the package to create a Svelte component. This could be cleaner, but it gets the job done. I'm also using Tailwind CSS, by the way.

// Editor.svelte
<script lang="ts">
  import { onDestroy, onMount } from 'svelte';
  import * as monaco from 'monaco-editor';
  import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';

  import { code as html_code } from './html_code';
  import { code as css_code } from './css_code';

  export var type: 'html' | 'css' = 'html';
  export let content = '';

  let editorElement: HTMLDivElement;
  let editor: monaco.editor.IStandaloneCodeEditor;
  let model: monaco.editor.ITextModel;

  onMount(async () => {
    self.MonacoEnvironment = {
      getWorker: function (_: any, label: string) {
        if (label === 'css' || label === 'scss' || label === 'less') {
          return new cssWorker();
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
          return new htmlWorker();
        }
        return new editorWorker();
      },
    };

    editor = monaco.editor.create(editorElement, {
      automaticLayout: true,
      theme: 'vs-dark',
      minimap: { enabled: false },
    });

    editor.onDidChangeModelContent(() => {
      content = editor.getValue();
    });

    const default_code = type === 'html' ? html_code : css_code;
    model = monaco.editor.createModel(default_code, type);
    editor.setModel(model);
    content = editor.getValue();
  });

  onDestroy(() => {
    monaco?.editor.getModels().forEach((model) => model.dispose());
    editor?.dispose();
  });
</script>

<div class="h-full w-full" bind:this={editorElement} />
Enter fullscreen mode Exit fullscreen mode

This class manages the lifecycle of the editor and provides a Svelte component that can be used elsewhere.

Create a CSS and HTML editor

We need to use the Editor component we just made in another component.

We make another component to wrap all of our logic rather than putting the logic in the page itself because we have to use a client directive, which we'll cover in a minute.

// CSSPlayground.svelte
<script lang="ts">
  import Editor from 'src/components/css_playground/Editor.svelte';

  // 1. Variables to bind the editors to
  let css_code = '';
  let html_code = '';
</script>

<div class="flex">
  <!-- 2. Setup and bind the Editor components -->
  <div class="h-64 w-full">
    <Editor type="html" bind:content={html_code} />
  </div>
  <div class="h-64 w-full">
    <Editor type="css" bind:content={css_code} />
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

All this code has is a layout for the editors and the reference to the strings for the code.

Load the CSS and HTML into an iFrame

We have a small addition to the previous component and have the iFrame set up.

// CSSPlayground.svelte
<script lang="ts">
  import Editor from 'src/components/css_playground/Editor.svelte';

  let css_code = '';
  let html_code = '';

  // 1. Load the HTML and CSS code into the iFrame whenever it changes
  function load_code(html_code: string, css_code: string) {
    const iFrame = document.getElementById('iFrame') as HTMLIFrameElement;
    if (iFrame === undefined || iFrame === null) {
      return;
    }
    const iframe_document = iFrame.contentWindow!.document;
    iframe_document.open();
    iframe_document.writeln(html_code + '<style>' + css_code + '</style>');
    iframe_document.close();

    iFrame.width = `${iframe_document.body.scrollWidth}`;
    iFrame.height = `${iframe_document.body.scrollHeight}`;
  }

  // 2. React whenever html_code or css_code changes
  $: {
    load_code(html_code, css_code);
  }
</script>

<div class="flex">
  <div class="h-64 w-full">
    <Editor type="html" bind:content={html_code} />
  </div>
  <div class="h-64 w-full">
    <Editor type="css" bind:content={css_code} />
  </div>
</div>
// 3. Add the iFrame
<iframe title="renderer" id="iFrame" />

Enter fullscreen mode Exit fullscreen mode

This is the most basic way I saw to load the HTML and CSS code into an iFrame. This could be improved.

One problem is that the iFrame needs to be more responsive.

Let me know if you know how to make the iFrame responsive to the browser and the inside elements at all times.

Add the Svelte component to the Astro page

Finally, as shown below, we add our CSSPlayground component to any Astro pages with the client directive.

// css_playground.astro
---
import PageLayout from '@/layouts/Base';
import CSSPlayground from '../components/css_playground/CSSPlayground.svelte';

const meta = {
  title: 'CSS Playground',
  description: 'A cool css experiment',
};
---

<PageLayout meta={meta} body_class='w-full m-0 px-4 pt-2 max-w-none'>
  <div class='space-y-6 flex flex-col'>
    <h1 class='title mb-4'>Cool CSS</h1>
    <!--  1. This client directive tells Astro to load this on the client, not the server. -->
    <CSSPlayground client:only='svelte' />
  </div>
</PageLayout>

Enter fullscreen mode Exit fullscreen mode

All done!

That's all!

You can find the deployed playground here.

It's not a huge feature, but seeing how easy it is to add Svelte (or any other framework integration) to an Astro site is fascinating.

I'm already a fan of Astro, and these simple integrations only solidify that fandom.

Let me know your favorite thing about Astro!

Top comments (0)