Skip to main content

Permanent URL

Any specific version of LiveCodes app can be accessed through the permanent unique URL:

{version}.livecodes.io
(e.g. https://v28.livecodes.io)

This allows embedded playgrounds to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions.

Permanent URL is used by default in the code generated by the embed screen UI. It is also available when sharing projects from the share screen.

The SDK embed option appUrl allows specifying the URL for the app to be used.
In addition, it is always a good practice to use a specific version of the SDK.

Example:

index.html
<div id="container"></div>
<script type="module">
  // specific SDK version
  import { createPlayground } from 'https://unpkg.com/[email protected]';

  createPlayground('#container', {
    // App permanent URL
    appUrl: 'https://v28.livecodes.io',
    template: 'react',
  });
</script>

Get Permanent URL​

You can get the permanent URL for the app from the About screen (App menu → About). By default, the code generated in the Embed screen uses permanent URL.
Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this:

await livecodes.exec('showVersion');

// output:
// App Version: 28 (https://github.com/live-codes/livecodes/releases/tag/v28)
// SDK Version: 0.5.0 (https://www.npmjs.com/package/livecodes/v/0.5.0)
// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f)
// App Permanent URL: https://v28.livecodes.io/
// SDK Permanent URL: https://unpkg.com/[email protected]/livecodes.js
caution

Please note that this only applies to the LiveCodes app and its dependencies.
NPM imports in project code that do not specify versions use the latest version. Package versions can be specified in the import.
Custom import maps can be set to control the module import behavior.

Example:

import lodash from '[email protected]';

console.log(lodash.VERSION); // -> 4.17.21

It is recommended to also specify versions of external resources.

Full Example:​

index.html
<div id="container"></div>
<script type="module">
  // specific SDK version
  import { createPlayground } from 'https://unpkg.com/[email protected]';

  createPlayground('#container', {
    // App permanent URL
    appUrl: 'https://v28.livecodes.io',
    config: {
        script: {
            language: 'javascript',
            // project code imports package with specific version
            content: 'import lodash from "[email protected]";\nconsole.log(lodash.VERSION);',
        },
        activeEditor: 'script',
        tools: { status: 'open', active: 'console' },
    },
  });
</script>
Sponsors