Codeium Editor Svelte

Codeium Editor Svelte is a free, open-source AI enabled code editor component for Svelte and SvelteKit that provides unlimited autocomplete and generative AI suggestions. No account required. Inspired by Exafunction/codeium-react-editor and the brilliant work done by the team at Codeium.

Installation

To use Codeium Editor Svelte in a project, you can run the following commands using your preferred package manager to install the codeium-editor-svelte NPM package:

With npm

npm i codeium-svelte-editor

With yarn

yarn add codeium-svelte-editor

With pnpm

pnpm add codeium-svelte-editor

With bun

bun add codeium-svelte-editor

Then, you can use it in your Svelte code like this:

<script lang="ts">
  import { CodeiumEditor } from "codeium-svelte-editor/components";
</script>

<CodeiumEditor />

Limitations for SvelteKit

A warning to SvelteKit users: CodeiumEditor is a client-side only Svelte component due to the underlying Monaco editor's nature. Thus, it will not work on pages or components rendered on the server.

CodeiumEditor will try to error out and inform you if you attempt to import it into an SSR environment

error: CodeiumEditor must be used in a browser environment only! Disable ssr or use dynamic imports to import the component instead.

But this error is not guaranteed to be thrown, and you might instead run into an internal ReferenceError

ReferenceError: Can't find variable: window

To resolve this issue, consider disabling SSR page-wise or layout-wise via

+page.ts

export const ssr = false;

or

+layout.ts

export const ssr = false;

However, if SSR is absolutely necessary, consider importing the component dynamically in your server-rendered page or component as shown below.

Using the onMount lifecycle hook with the {#await} block (recommended)

<script lang="ts">
  import { onMount } from 'svelte'

  let mounted = false

  onMount(() => {
    mounted = true
  })
</script>

{#if mounted}
  {#await import('codeium-svelte-editor/components')}
    <!-- If you like, add a skeleton/loader component here instead-->
    <p>Loading editor...</p>
  {:then { CodeiumEditor }}
    <svelte:component this={CodeiumEditor} />
  {/await}
{/if}

Using the {#await} block with the browser environment flag and an async editor constructor

<script lang="ts">
  import { browser } from '$app/environment'

  import type { CodeiumEditorInstance } from 'codeium-svelte-editor/types'

  const EditorConstructor: Promise<CodeiumEditorInstance | null> = browser
    ? import('codeium-svelte-editor/components').then((module) => module.CodeiumEditor)
    : new Promise(() => null)
</script>

{#await EditorConstructor}
  <!-- If you like, add a skeleton/loader component here instead-->
  <p>Loading editor...</p>
{:then CodeiumEditor}
  <svelte:component this={CodeiumEditor} />
{/await}

Using the onMount lifecycle hook with Promise resolution

<script lang="ts">
  import { onMount } from 'svelte'

  import type { CodeiumEditorInstance } from 'codeium-svelte-editor/types'

  let CodeiumEditor: CodeiumEditorInstance

  onMount(() => {
    import('codeium-svelte-editor/components').then((module) => CodeiumEditor = module.CodeiumEditor)
  })
</script>

{#if CodeiumEditor}
  <svelte:component this={CodeiumEditor} />
{:else}
  <!-- If you like, add a skeleton/loader component here instead-->
  <p>Loading editor...</p>
{/if}

Using the onMount lifecycle hook with async/await

<script lang="ts">
  import { onMount } from 'svelte'

  import type { CodeiumEditorInstance } from 'codeium-svelte-editor/types'

  let CodeiumEditor: CodeiumEditorInstance

  onMount(async () => {
    CodeiumEditor = (await import('codeium-svelte-editor/components')).CodeiumEditor
  })
</script>

{#if CodeiumEditor}
  <svelte:component this={CodeiumEditor} />
{:else}
  <!-- If you like, add a skeleton/loader component here instead -->
  <p>Loading editor...</p>
{/if}

or

<script lang="ts">
  import { onMount } from 'svelte'

  import type { CodeiumEditorInstance } from 'codeium-svelte-editor/types'

  let CodeiumEditor: CodeiumEditorInstance

  async function loadEditor() {
    CodeiumEditor = (await import('codeium-svelte-editor/components')).CodeiumEditor
  }

  onMount(() => {
    loadEditor();
  })
</script>

{#if CodeiumEditor}
  <svelte:component this={CodeiumEditor} />
{:else}
  <!-- If you like, add a skeleton/loader component here instead -->
  <p>Loading editor...</p>
{/if}

For more info on these patterns, refer to the official SvelteKit documentation: How do I use a client-side only library that depends on document or window?

Props

CodeiumEditor is a Svelte component that takes in the following props:

.editor {
  width: 100%;
  height: 600px;
}

TODO

• Finish demo
  • Add styling
• Use Svelte 5 Runes
• Figure out how to import component without disabling csr
• Package library and publish to npm
• Publicise package on discord, twitter, reddit, and other social media

What props do I want to have?

Do we create multiple models or just one?