Solid

Solid is a JavaScript framework for making interactive web applications.

Solid offers very similar syntax to React, with strong focus on reactivity using signals. Solid supports templating in 3 forms JSX, Tagged Template Literals and Solid's HyperScript variant, although JSX is the predominate form. Solid also supports TypeScript (See Solid-TS).

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "solid"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "solid"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "solid"
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "solid"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "solid"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "solid"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "solid"
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="solid"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Usage

For usage, see documentation for JSX and TypeScript support in LiveCodes.

Language Info

Name

solid

Extension

solid.jsx

Editor

script

Compiler

Official Solid JSX compiler (babel-preset-solid)

Version

babel-preset-solid: v1.9.10

Code Formatting

Using Prettier.

Custom Settings

Custom settings added to the property solid are passed to the Babel compiler during compile. Please check the documentation for full reference. In addition, the option disableAutoRender can be set to true to disable auto-rendering.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings

{
  "solid": {
    "disableAutoRender": true
  }
}

Starter Template

https://livecodes.io/?template=solid (uses TSX)

Links

• Solid
• JSX
• TypeScript