Skip to main content

​
Overview

LiveCodes provides ready-to-use starter templates for every supported language and framework. Each template includes:
  • Pre-configured editor setup
  • Sample code demonstrating core features
  • Required dependencies and imports
  • Best practices and conventions

​
Using Templates

1

Access Templates

Click New → Starter Templates from the app menu
2

Browse & Search

Browse by category or search for a specific framework
3

Select & Start

Click a template to load it immediately
You can also create a new project from a template by visiting: https://livecodes.io/?template=<template-name>

​
JavaScript Frameworks

React

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Vue 3

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

Solid

import { createSignal } from 'solid-js';

export default function App() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(count() + 1)}>
      Clicked {count()} times
    </button>
  );
}

​
UI Libraries

  • Tailwind CSS - Utility-first CSS
  • Bootstrap - Component library
  • DaisyUI - Tailwind component library
  • shadcn/ui - Re-usable components

​
Language Templates

Every supported language has a starter template: 
const title = document.querySelector<HTMLElement>("#title");
const counter = document.querySelector<HTMLElement>("#counter");
const button = document.querySelector<HTMLButtonElement>("#counter-button");

if (title) title.innerText = "TypeScript";
let count: number = 0;

button?.addEventListener("click", () => {
  count++;
  if (counter) counter.innerText = String(count);
});

from browser import document

def increment(event):
    global count
    count += 1
    document["counter"].text = str(count)

document["title"].text = "Python"
count = 0
document["counter-button"].bind("click", increment)

package main

import (
    "fmt"
    "syscall/js"
)

func main() {
    document := js.Global().Get("document")
    document.Call("querySelector", "#title").Set("innerText", "Go")
    
    count := 0
    cb := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        count++
        document.Call("querySelector", "#counter").Set("innerText", fmt.Sprint(count))
        return nil
    })
    
    document.Call("querySelector", "#counter-button").Call("addEventListener", "click", cb)
    select {}
}

​
Template Structure

Each template includes:
  1. HTML (Markup) - Page structure
  2. CSS (Style) - Styling and layout
  3. JavaScript/Language (Script) - Logic and interactivity
  4. External Resources - CDN links for dependencies
  5. Configuration - Language-specific settings

​
Creating Custom Templates

1

Build Your Project

Create and configure your project in LiveCodes
2

Save Configuration

Export your project as JSON from the menu
3

Load as Template

Import the JSON configuration to reuse across projects
You can also share template URLs with query parameters or create templates via the SDK.

​
Blank Template

Start from scratch with the Blank template:
  • No pre-written code
  • No external dependencies
  • Choose your own languages
  • Languages - See all supported languages
  • Import - Import code from other sources
  • Export - Save and share your projects