Experiments >

Code animation: Settings editor

Experiment #15022nd April, 2021by Joshua Nussbaum

This integrates the previous experiment where I researched creating a DSL for defining property editor components.

SettingsEditor component

The <SettingsEditor> component is responsible for configuring defaults and global css rules.

<Section title="Defaults">
  <NumberField label="Duration (ms)" bind:value={$document.defaults.duration} min=0/>
  <SelectField label="Easing" bind:value={$document.defaults.easing} options={easingFunctions}/>

<Section title="Style">
  <CodeField label="CSS" language="css" bind:value={$document.settings.styles}/>





  • When document.css changes, it should automatically be reflected in the DOM by writing/updating a <style> tag.
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow