v46 (2025-05-24)

Highlights for this release

• This release refactors how LiveCodes loads the projects which makes it more performant, more consistent and supports loading much bigger projects.
• Support for Jinja templating language was added.
• Upgraded React Compiler to RC.
• Added docs for the new Markdown-to-LiveCodes feature.
• Allowed SDK to update editor content only with setConfig without reloading the project or editor language. This is useful for streaming content (e.g. from LLM). Demo: https://livecodes.io/?x=id/vya9n6jbuvq&mode=result

Features

• Compilers: add Jinja template support (9e15076)
• encode minimal data in url search params and the rest in hash params to allow for longer urls while still maintaining server analytics feature (80efa44)
• SDK: allow sdk setConfig to just update editor content (282824c)
• SDK: communicate sdk and app versions (63e7db2)
• sort imports with prettier (7f1145c)

Bug Fixes

• Compilers: compile asciidoc as standalone (7ae4220)
• Config: fix decoding params (3494e58)
• Editor: fix loading vue & custom languages in monaco (b7bbb80)
• fixed self-hosted deployments to GitHub Pages (9859940)

Credits

• @BassemHalim refactored the app and SDK to allow for the new project loading feature.
• @tarekwfa0110 added HTML language docs.
• @ahmeddelattarr added AsciiDoc language docs
• @ahmadalfy , @zyf722 and @Seth0x41 reviewed the Markdown-to-LiveCodes feature.

Thank you ❤️

sdk-v0.11.1 (2025-05-24)

Bug Fixes

• SDK: fix sdk build (sdkVersion) (c383d26)

sdk-v0.11.0 (2025-05-24)

• This release enables the SDK to create playgrounds and generate URLs for much bigger projects, by encoding data in URL hash instead of query params, while maintaining backwards compatibility.

• Adds support for Jinja templating engine.

Credits

• @BassemHalim did a lot of work on this release. Thank you ❤️

v45 (2025-04-25)

Highlights for this release

• This release adds support for csharp-wasm and java languages.
• The SDK now compresses and encodes SDK params.
• In addition to some UI changes and bug fixes.

Credits

• @Seth0x41 added csharp-wasm and java support

Thank you ❤️

Features

• add Csharp-Wasm support (63164e8)
• add Java language support with DoppioJVM (0ecb6b3)
• UI: make the script language menu wider with more columns (2b3c2eb)

Bug Fixes

• Editor: fix Vue editor TS compiler options (23b55ef)
• Result: fix clearing styles (c5957ee)
• ToolsPane: fix console: copy errors, added string to variable names (d858e4f)
• UI: use notifications for loading message (c5c49a2)

sdk-v0.10.0 (2025-04-25)

• encode & compress sdk params (b49c1cb)
• add csharp-wasm language (63164e8)
• add java language (0ecb6b3)

v44 (2025-04-10)

Highlights for this release

This release adds multiple new features and fixes, including:

• Significant improvements in editor support for Vue (e.g. auto-complete, hover info, defineProps can now infer props from locally declared types, and more).
• Vue and Svelte single file components can import (and recursively compile) other components encoded as data URLs (docs).
• CSS processors (e.g. Tailwind CSS) can now process style blocks (e.g. @apply) in Vue and Svelete SFCs.
• ESM imports for full, relative and data URLs no longer show typescript error.
• React native now uses React v19 (see starter template).
• A new config option foldRegions was added. When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.
• Editor configurations (config.markup, config.style, config.script) have a new property foldLines that accepts an array of objects (e.g. [{ from: 1, to: 5 }]) that indicates which lines to fold. This can be useful for less relevant code in embedded playgrounds.
• config.editor now supports the value "auto", which indicates that Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. This can be useful in "simple" mode.
• The loading screen now uses an animated logo.
• A new command menu action was added for selecting editor theme.
• Various UI improvements and fixes.

Credits

• @FathyMuhamed added the animated loading logo and command menu action for editor theme.
• @logaretm and @ismail9k guided Vue improvements.

Thank you ❤️

Features

• Command Menu: add editor theme option with translations (314b97c)
• CommandMenu: add editor theme action to command menu (88b67e3)
• Compilers: allow SFC to import other SFCs encoded as data URLs (11cef05)
• Compilers: run processors on SFC blocks (7208924)
• Compilers: vue, infer props from types (af91b7d)
• Config: add the value "auto" to config.editor options (0f62de8)
• Editor: add monaco-volar to improve Vue editor experience (badaf6a)
• Editor: allow folding lines and regions (984c913)
• Loading: replace logo with loading animation SVG in index.html (d8254f4)
• Templates: edit Vue template to infer props from types (9269d30)
• Translations: add editor theme translation to command menu (04fb14a)
• UI: pulsating loading logo (9c62d48)

Bug Fixes

• Build: fix incrementing release version (b12c8f9)
• Compilers: fix react native (support react v19) (ed3a533)
• Editor: fix TS errors for data url imports (60d9563)
• Editor: fix TS errors for http & relative imports (f6943cd)
• UI: fix gutter overflow (9c48c05)
• UI: fix hidden editor horizontal scroll bar (f368f1b)
• UI: fix modal focus in inputs (92f9416)

sdk-v0.9.1 (2025-04-10)

Features

• Editor: allow folding lines and regions (984c913)

  A new config option foldRegions was added. When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

  In addition, editor configurations (config.markup, config.style, config.script) have a new property foldLines that accepts an array of objects (e.g. [{ from: 1, to: 5 }]) that indicates which lines to fold. This can be useful for less relevant code in embedded playgrounds.

• Config: add the value "auto" to config.editor options (0f62de8)

  If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. This can be useful in "simple" mode.

v43 (2025-03-15)

Highlights for this release

This release added multiple new features and fixes, including:

• Vue and Svelte can now be used in the markup editor, in addition to the script editor. This allows having 2 components in a single project. (see docs).
• Vue and Svelte starter templates were updated to use multiple components.
• The editor (markup, style, script) order in the UI can now be set using a new order option in the editor configuration. (e.g. config.markup.order). This can be useful, specially after adding support for Vue and Svelte in the markup editor, for example to have components followed by the styles. (see example).
• Tailwind CSS plugins: In addition to allowing importing plugins from URLs, now plugins can be imported as bare modules (from npm) e.g. @plugin "daisyui"{ /* ... */ }.
• A new daisyui starter template was added (https://livecodes.io/?template=daisyui).
• Significant improvements in docs website, including a dark mode, changing the default theme color used for demo playgrounds, and adding support for llms.txt files.
• Multiple fixes, notably, avoiding autofocus in embeds, fixing preact module resolution and type fixes.

Credits

• @logaretm suggested having multiple Vue components.
• @jcubic reported the conflicting modules in preact.

Thank you ❤️

This is the full list of changes:

Features

• Compilers: add svelte to markup languages (16e5091)
• Compilers: add vue to markup languages (70f5b33)
• Compilers: allow bare module tailwindcss plugins (c9e156c)
• Config: allow re-ordering code editors (5d73064)
• Import-maps: allow using custom file names to import from script editor (4499458)
• SDK: Change SDK react component type from JSX.Element to React.ReactElement<Props> (962d4da)
• Templates: add daisyUI starter template (c24fc56)
• Templates: update vue and svelte templates to use multiple SFCs (3c42c61)

Bug Fixes

• App: avoid autofocusing embeds (cd33134)
• App: fix changing modes (84cf763)
• App: fix loading types in embeds (d5f727c)
• ci: update output variable for skip condition in i18n-update-scheduled (dc2b625)
• Editor: disable monaco mouse wheel zoom (b1596ef)
• Import-maps: fix importing duplicate instances of vue (ceb2868)
• Import-maps: fix preact module resolution (198becf), closes #752
• Types: fix importing react types in jsx/tsx (db605d3)

sdk-v0.9.0 (2025-03-15)

Highlights for this release

In this release of SDK, the following changes were made:

• The React component type was changed from JSX.Element to React.ReactElement<Props> for compatibility with React 19 (which removed the JSX type).
• The editor (markup, style, script) order in the UI can now be set using a new order option in the editor configuration. (e.g. config.markup.order). This can be useful, specially after adding support for Vue and Svelte in the markup editor, for example to have components followed by the styles. (see example)
• A new daisyui starter template was added.

Features

• SDK: Change SDK react component type from JSX.Element to React.ReactElement<Props> (962d4da)
• Config: allow re-ordering code editors (5d73064)
• Templates: add daisyUI starter template (c24fc56)

v42 (2025-02-01)

Highlights for this release

This release adds support for Tailwind CSS v4, while maintaining backward compatibility for v3.

Projects using the old Tailwind CSS directives (e.g. @tailwind base; @tailwind components; @tailwind utilities;) will use v3.
To upgrade to v4 replace the directives with the new import statement @import "tailwindcss"; or simply remove the directives.

The Tailwind CSS starter template was upgraded to use v4.

In addition Monaco editor intellisense for Tailwind CSS was added: autocomplete, hover for generated css, color preview, etc.

Features

• Compilers: add support for tailwindcss v4 (cc90203)
• Editor: add support for tailwindcss in monaco editor (c7f166b)
• Templates: upgrade tailwindcss starter template to v4 (84b32f3)

Bug Fixes

• CommandMenu: allow other shortcut combinations to use ctrl+k (2e026d0)
• reset editor titles in shared URLs (297cd29)