Experiments >

Code animation: Property UI components 3

Experiment #13616th April, 2021by Joshua Nussbaum

Continuing to build out controls for the property grid.

This experiment will look at implementing the CodeField control:

CodeField component

This one is a little bit tricky as it involved using codemirror which can only render in the browser.

I reused the svelte-codemirror project I created a few weeks back. To make it run in-browser only, the components are imported dynamically - only when window is defined:

// null on server side
let component

onMount(async () => {
  // don't run server-side
  if (!window) return

  // load codemirror stuff dynamically
  // ./codemirror.js contains svelte-codemirror
  // and related dependencies, like syntax highlighting modules
  const { CodeMirror} = await import('./codemirror')

  component = CodeMirror

Code listing

	import Field from './Field.svelte'
	import { onMount } from 'svelte'
	export let orientation = 'vertical'
	export let label = null
	export let name
	export let value
	export let lineNumbers = false
	export let language = "htmlmixed"

	const options = {
		mode: language,

	let component, editor

	$: if (editor) {
		editor.on('change', function (cm) {
			value = cm.getValue()

	onMount(async () => {
		const { CodeMirror } = await import('./codemirror')

		component = CodeMirror

<Field {label} {orientation} for={name}>
	<div class="container">
		{#if component}
			<svelte:component this={component} bind:editor {options}/>


  • The syntax highlighting file must be loaded first. Even thought there is a language prop, it can’t dynamically load it ATM.
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow