diff --git a/.github/workflows/i18n-update-pull.yml b/.github/workflows/i18n-update-pull.yml
index 8022b2dfe0..2e78760639 100644
--- a/.github/workflows/i18n-update-pull.yml
+++ b/.github/workflows/i18n-update-pull.yml
@@ -22,47 +22,47 @@ jobs:
       branch: ${{ steps.fetch-pr.outputs.branch }}
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-    
-    - name: Check out repository
-      uses: actions/checkout@v4
-      with:
-        token: ${{ steps.generate-token.outputs.token }}
-
-    - name: Fetch PR details
-      id: fetch-pr
-      run: |
-        PR_DETAILS=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "${{ github.event.issue.pull_request.url }}")
-        PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.ref')
-
-        skip () {
-          echo "$1 Exiting..."
-          echo "skip=true" >> $GITHUB_OUTPUT
-          echo "skipReason=$1" >> $GITHUB_OUTPUT
-        }
-
-        if [[ $PR_BRANCH == "i18n/"* ]]; then
-          skip "Branch \`$PR_BRANCH\` is a i18n branch."
-        fi
-
-        PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.label' | sed 's/:/\//g')
-        NEW_BRANCH="i18n/$PR_BRANCH"
-        echo "newBranch=$NEW_BRANCH" >> $GITHUB_OUTPUT
-        echo "branch=$PR_BRANCH" >> $GITHUB_OUTPUT
-
-        git config --global user.name "livecodes-ci[bot]"
-        git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
-        
-        if [[ ! $(git ls-remote --heads origin $NEW_BRANCH) ]]; then
-          skip "Branch \`$NEW_BRANCH\` does not exist."
-        fi
-      env:
-        GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+
+      - name: Fetch PR details
+        id: fetch-pr
+        run: |
+          PR_DETAILS=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "${{ github.event.issue.pull_request.url }}")
+          PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.ref')
+
+          skip () {
+            echo "$1 Exiting..."
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "skipReason=$1" >> $GITHUB_OUTPUT
+          }
+
+          if [[ $PR_BRANCH == "i18n/"* ]]; then
+            skip "Branch \`$PR_BRANCH\` is a i18n branch."
+          fi
+
+          PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.label' | sed 's/:/\//g')
+          NEW_BRANCH="i18n/$PR_BRANCH"
+          echo "newBranch=$NEW_BRANCH" >> $GITHUB_OUTPUT
+          echo "branch=$PR_BRANCH" >> $GITHUB_OUTPUT
+
+          git config --global user.name "livecodes-ci[bot]"
+          git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
+
+          if [[ ! $(git ls-remote --heads origin $NEW_BRANCH) ]]; then
+            skip "Branch \`$NEW_BRANCH\` does not exist."
+          fi
+        env:
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
 
   runner:
     name: Runner
@@ -74,61 +74,61 @@ jobs:
       PR_BRANCH: ${{ needs.precheck.outputs.branch }}
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-  
-    - name: Check out repository
-      uses: actions/checkout@v4
-      with:
-        ref: ${{ needs.precheck.outputs.newBranch }}
-        token: ${{ steps.generate-token.outputs.token }}
-
-    - name: Setup Node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.NODE_VERSION }}
-        cache: 'npm'
-        cache-dependency-path: '**/package-lock.json'
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Import from Lokalise
-      run: |
-        mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $PR_BRANCH && rm -rf $LOKALISE_TEMP
-      env:
-        LOKALISE_TEMP: lokalise_tmp
-    
-    - name: Generate Lokalise JSON files
-      run: npm run i18n-lokalise-json all
-
-    - name: Linting and fixing
-      run: npm run fix
-
-    - name: Commit changes
-      run: |
-        git config --global user.name "livecodes-ci[bot]"
-        git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
-        git add .
-        
-        # Only commit if there are changes
-        git diff-index --quiet HEAD || git commit -m "i18n: pull translation from Lokalise"
-
-        # Save SHA of the latest commit to locale
-        echo "LAST_COMMIT_SHA=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales)" >> $GITHUB_ENV
-
-    - name: Push changes
-      run: git push origin $NEW_BRANCH
-
-    - name: Create a new i18n PR, comment on source PR and reaction
-      uses: actions/github-script@v7
-      with:
-        github-token: ${{ steps.generate-token.outputs.token }}
-        script: |
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ needs.precheck.outputs.newBranch }}
+          token: ${{ steps.generate-token.outputs.token }}
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Import from Lokalise
+        run: |
+          mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $PR_BRANCH && rm -rf $LOKALISE_TEMP
+        env:
+          LOKALISE_TEMP: lokalise_tmp
+
+      - name: Generate Lokalise JSON files
+        run: npm run i18n-lokalise-json all
+
+      - name: Linting and fixing
+        run: npm run fix
+
+      - name: Commit changes
+        run: |
+          git config --global user.name "livecodes-ci[bot]"
+          git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
+          git add .
+
+          # Only commit if there are changes
+          git diff-index --quiet HEAD || git commit -m "i18n: pull translation from Lokalise"
+
+          # Save SHA of the latest commit to locale
+          echo "LAST_COMMIT_SHA=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales)" >> $GITHUB_ENV
+
+      - name: Push changes
+        run: git push origin $NEW_BRANCH
+
+      - name: Create a new i18n PR, comment on source PR and reaction
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ steps.generate-token.outputs.token }}
+          script: |
             const repoURL = context.payload.repository.html_url;
             const branchURL = `${repoURL}/tree/${process.env.NEW_BRANCH}`;
             const prTitle = `i18n: ${{ github.event.issue.title }}`;
@@ -146,7 +146,7 @@ jobs:
             - [ ] 📦 Chore (Release)
             - [ ] ⏩ Revert
             - [x] 🌐 Internationalization / Translation
-            
+
             ## Description
             ### i18n Actions: \`.i18n-update-pull\`
             Localization pulled from Lokalise.
@@ -155,7 +155,7 @@ jobs:
             | --- | --- |
             | **i18n Branch** | [\`${process.env.NEW_BRANCH}\`](${branchURL}) |
             | **Last Commit SHA** | ${process.env.LAST_COMMIT_SHA} |
-            
+
             ## Related Tickets & Documents
             - **Source PR**: #${{ github.event.issue.number }}
             `;
@@ -178,7 +178,7 @@ jobs:
             | **Last Commit SHA** | ${process.env.LAST_COMMIT_SHA} |
             | **i18n PR** | #${prInfo.data.number} |
             `;
-            
+
             github.rest.issues.createComment({
               issue_number: context.issue.number,
               owner: context.repo.owner,
@@ -192,7 +192,7 @@ jobs:
               comment_id: ${{ github.event.comment.id }},
               content: 'rocket'
             });
-  
+
   exception:
     name: Exception
     runs-on: ubuntu-latest
@@ -202,22 +202,22 @@ jobs:
       SKIP_REASON: ${{ needs.precheck.outputs.skipReason }}
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-    
-    - name: Create reaction on PR
-      uses: actions/github-script@v7
-      with:
-        github-token: ${{ steps.generate-token.outputs.token }}
-        script: |
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Create reaction on PR
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ steps.generate-token.outputs.token }}
+          script: |
             const runURL = `${context.payload.repository.html_url}/actions/runs/${process.env.GITHUB_RUN_ID}`;
             const commentBody = `## i18n Actions: \`.i18n-update-pull\`
             Failed to perform action due to following reason: **${process.env.SKIP_REASON}**
-            
+
             Please check [action logs](${runURL}) for more details.
             `;
             github.rest.issues.createComment({
diff --git a/.github/workflows/i18n-update-push.yml b/.github/workflows/i18n-update-push.yml
index e2dc67c3f7..fcbf516740 100644
--- a/.github/workflows/i18n-update-push.yml
+++ b/.github/workflows/i18n-update-push.yml
@@ -22,48 +22,48 @@ jobs:
       branch: ${{ steps.fetch-pr.outputs.branch }}
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-
-    - name: Check out repository
-      uses: actions/checkout@v4
-      with:
-        token: ${{ steps.generate-token.outputs.token }}
-
-    - name: Fetch PR details
-      id: fetch-pr
-      run: |
-        PR_DETAILS=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "${{ github.event.issue.pull_request.url }}")
-        PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.ref')
-
-        if [[ $PR_BRANCH == "i18n/"* ]]; then
-          SKIP_REASON="Branch \`$PR_BRANCH\` is a i18n branch."
-          echo "$SKIP_REASON Exiting..."
-          echo "skip=true" >> $GITHUB_OUTPUT
-          echo "skipReason=$SKIP_REASON" >> $GITHUB_OUTPUT
-        fi
-
-        # Use branch name prefixed with owner name
-        PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.label' | sed 's/:/\//g')
-        NEW_BRANCH="i18n/$PR_BRANCH"
-        echo "newBranch=$NEW_BRANCH" >> $GITHUB_OUTPUT
-        echo "branch=$PR_BRANCH" >> $GITHUB_OUTPUT
-
-        git config --global user.name "livecodes-ci[bot]"
-        git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
-
-        if [[ $(git ls-remote --heads origin $NEW_BRANCH) ]]; then
-          SKIP_REASON="Branch \`$NEW_BRANCH\` already exists."
-          echo "$SKIP_REASON Exiting..."
-          echo "skip=true" >> $GITHUB_OUTPUT
-          echo "skipReason=$SKIP_REASON" >> $GITHUB_OUTPUT
-        fi
-      env:
-        GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+
+      - name: Fetch PR details
+        id: fetch-pr
+        run: |
+          PR_DETAILS=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "${{ github.event.issue.pull_request.url }}")
+          PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.ref')
+
+          if [[ $PR_BRANCH == "i18n/"* ]]; then
+            SKIP_REASON="Branch \`$PR_BRANCH\` is a i18n branch."
+            echo "$SKIP_REASON Exiting..."
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "skipReason=$SKIP_REASON" >> $GITHUB_OUTPUT
+          fi
+
+          # Use branch name prefixed with owner name
+          PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.label' | sed 's/:/\//g')
+          NEW_BRANCH="i18n/$PR_BRANCH"
+          echo "newBranch=$NEW_BRANCH" >> $GITHUB_OUTPUT
+          echo "branch=$PR_BRANCH" >> $GITHUB_OUTPUT
+
+          git config --global user.name "livecodes-ci[bot]"
+          git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
+
+          if [[ $(git ls-remote --heads origin $NEW_BRANCH) ]]; then
+            SKIP_REASON="Branch \`$NEW_BRANCH\` already exists."
+            echo "$SKIP_REASON Exiting..."
+            echo "skip=true" >> $GITHUB_OUTPUT
+            echo "skipReason=$SKIP_REASON" >> $GITHUB_OUTPUT
+          fi
+        env:
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
 
   runner:
     name: Runner
@@ -75,57 +75,57 @@ jobs:
       PR_BRANCH: ${{ needs.precheck.outputs.branch }}
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-
-    - name: Check out repository
-      uses: actions/checkout@v4
-      with:
-        token: ${{ steps.generate-token.outputs.token }}
-
-    - name: Setup Node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.NODE_VERSION }}
-        cache: 'npm'
-        cache-dependency-path: '**/package-lock.json'
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Create new branch
-      run: git checkout -b $NEW_BRANCH
-
-    - name: Linting and fixing
-      run: npm run fix
-
-    - name: Commit changes
-      run: |
-        git config --global user.name "livecodes-ci[bot]"
-        git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
-        git add .
-
-        # Only commit if there are changes
-        git diff-index --quiet HEAD || git commit -m "i18n: update source texts"
-
-        # Save SHA of the latest commit to English locale
-        echo "LAST_COMMIT_SHA=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV
-
-    - name: Push changes
-      run: git push origin $NEW_BRANCH
-
-    - name: Push source texts to Lokalise
-      run: npm run i18n-update-push -- $PR_BRANCH
-
-    - name: Create comment and reaction on PR
-      uses: actions/github-script@v7
-      with:
-        github-token: ${{ steps.generate-token.outputs.token }}
-        script: |
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ steps.generate-token.outputs.token }}
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create new branch
+        run: git checkout -b $NEW_BRANCH
+
+      - name: Linting and fixing
+        run: npm run fix
+
+      - name: Commit changes
+        run: |
+          git config --global user.name "livecodes-ci[bot]"
+          git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
+          git add .
+
+          # Only commit if there are changes
+          git diff-index --quiet HEAD || git commit -m "i18n: update source texts"
+
+          # Save SHA of the latest commit to English locale
+          echo "LAST_COMMIT_SHA=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV
+
+      - name: Push changes
+        run: git push origin $NEW_BRANCH
+
+      - name: Push source texts to Lokalise
+        run: npm run i18n-update-push -- $PR_BRANCH
+
+      - name: Create comment and reaction on PR
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ steps.generate-token.outputs.token }}
+          script: |
             const repoURL = context.payload.repository.html_url;
             const branchURL = `${repoURL}/tree/${process.env.NEW_BRANCH}`;
             const commentBody = `## i18n Actions: \`.i18n-update-push\`
@@ -138,7 +138,7 @@ jobs:
 
             Maintainers can comment \`.i18n-update-pull\` after translation is done to trigger the i18n pull workflow and pull the changes back to Github. 
             `;
-            
+
             github.rest.issues.createComment({
               issue_number: context.issue.number,
               owner: context.repo.owner,
@@ -152,7 +152,7 @@ jobs:
               comment_id: ${{ github.event.comment.id }},
               content: 'rocket'
             });
-  
+
   exception:
     name: Exception
     runs-on: ubuntu-latest
@@ -162,22 +162,22 @@ jobs:
       SKIP_REASON: ${{ needs.precheck.outputs.skipReason }}
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-    
-    - name: Create comment and reaction on PR
-      uses: actions/github-script@v7
-      with:
-        github-token: ${{ steps.generate-token.outputs.token }}
-        script: |
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Create comment and reaction on PR
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ steps.generate-token.outputs.token }}
+          script: |
             const runURL = `${context.payload.repository.html_url}/actions/runs/${process.env.GITHUB_RUN_ID}`;
             const commentBody = `## i18n Actions: \`.i18n-update-push\`
             Failed to perform action due to following reason: **${process.env.SKIP_REASON}**
-            
+
             Please check [action logs](${runURL}) for more details.
             `;
             github.rest.issues.createComment({
@@ -186,7 +186,7 @@ jobs:
               repo: context.repo.repo,
               body: commentBody
             })
-        
+
             github.rest.reactions.createForIssueComment({
               owner: context.repo.owner,
               repo: context.repo.repo,
diff --git a/.github/workflows/i18n-update-scheduled.yml b/.github/workflows/i18n-update-scheduled.yml
index a977fbe1cd..be2b5ac395 100644
--- a/.github/workflows/i18n-update-scheduled.yml
+++ b/.github/workflows/i18n-update-scheduled.yml
@@ -25,109 +25,109 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Generate Github Token for CI Bot
-      uses: actions/create-github-app-token@v1
-      id: generate-token
-      with:
-        app-id: ${{ secrets.CI_APP_ID }}
-        private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
-
-    - name: Check out repository
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-        token: ${{ steps.generate-token.outputs.token }}
-
-    - name: Switch to i18n branch
-      run: |
-        git config --global user.name "livecodes-ci[bot]"
-        git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
-
-        if [[ $(git ls-remote --heads origin $BRANCH) ]]; then
-          git config pull.rebase false
-          git fetch origin $BRANCH:$BRANCH
-          git checkout $BRANCH
-        else
-          git checkout -b $BRANCH
-        fi
-
-    - name: Setup Node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.NODE_VERSION }}
-        cache: 'npm'
-        cache-dependency-path: '**/package-lock.json'
-
-    - name: Install dependencies
-      run: npm ci
-
-    # - name: Linting and fixing
-    #   run: npm run fix
-
-    # - name: Commit changes
-    #   run: |
-    #     git add .
-
-    #     # Only commit if there are changes
-    #     git diff-index --quiet HEAD || git commit -m "i18n: update source texts"
-
-    #     # Save SHA of the latest commit to English locale
-    #     echo "LAST_COMMIT_SHA_PUSH=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV
-
-    # - name: Push changes
-    #   run: git push origin $BRANCH
-
-    # - name: Push source texts to Lokalise
-    #   run: npm run i18n-update-push -- $LOKALISE_BRANCH
-
-    - name: Import from Lokalise
-      run: |
-        mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $LOKALISE_BRANCH && rm -rf $LOKALISE_TEMP
-      env:
-        LOKALISE_TEMP: lokalise_tmp
-
-    - name: Linting and fixing
-      run: npm run fix
-
-    - name: Commit changes
-      run: |
-        git add .
-        
-        # Only commit if there are changes
-        git diff-index --quiet HEAD || git commit -m "i18n: pull translation from Lokalise"
-
-        # Save SHA of the latest commit to locale
-        echo "LAST_COMMIT_SHA_PULL=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales)" >> $GITHUB_ENV
-
-    - name: Push changes
-      run: |
-
-        git pull origin ${{ github.event.repository.default_branch }} || {
-          echo "Failed to pull from ${{ github.event.repository.default_branch }}."
-          echo "Please manually pull the changes, solve potential conflicts, and re-run the workflow."
-          echo "::error title=Pull failed::Failed to pull from ${{ github.event.repository.default_branch }}."
-          exit 1
-        }
-
-        git push origin $BRANCH
-
-    - name: Check if has differences between ${{ env.BRANCH }} and ${{ github.event.repository.default_branch }}
-      id: check-diff
-      run: |
-        DIFF=$(git diff --name-only $BRANCH origin/${{ github.event.repository.default_branch }})
-        if [[ -z $DIFF ]]; then
-          echo "No difference between $BRANCH and ${{ github.event.repository.default_branch }}."
-          echo "SKIP=true" >> $GITHUB_OUTPUT
-        fi
-
-        echo "LAST_COMMIT_SHA_PUSH=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV
-
-    - name: Create a new i18n PR if not exists
-      uses: actions/github-script@v7
-      if: steps.check-diff.outputs.SKIP != 'true'
-      with:
-        github-token: ${{ steps.generate-token.outputs.token }}
-        script: |
+      - name: Generate Github Token for CI Bot
+        uses: actions/create-github-app-token@v1
+        id: generate-token
+        with:
+          app-id: ${{ secrets.CI_APP_ID }}
+          private-key: ${{ secrets.CI_APP_PRIVATE_KEY }}
+
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ steps.generate-token.outputs.token }}
+
+      - name: Switch to i18n branch
+        run: |
+          git config --global user.name "livecodes-ci[bot]"
+          git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com"
+
+          if [[ $(git ls-remote --heads origin $BRANCH) ]]; then
+            git config pull.rebase false
+            git fetch origin $BRANCH:$BRANCH
+            git checkout $BRANCH
+          else
+            git checkout -b $BRANCH
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Install dependencies
+        run: npm ci
+
+      # - name: Linting and fixing
+      #   run: npm run fix
+
+      # - name: Commit changes
+      #   run: |
+      #     git add .
+
+      #     # Only commit if there are changes
+      #     git diff-index --quiet HEAD || git commit -m "i18n: update source texts"
+
+      #     # Save SHA of the latest commit to English locale
+      #     echo "LAST_COMMIT_SHA_PUSH=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV
+
+      # - name: Push changes
+      #   run: git push origin $BRANCH
+
+      # - name: Push source texts to Lokalise
+      #   run: npm run i18n-update-push -- $LOKALISE_BRANCH
+
+      - name: Import from Lokalise
+        run: |
+          mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $LOKALISE_BRANCH && rm -rf $LOKALISE_TEMP
+        env:
+          LOKALISE_TEMP: lokalise_tmp
+
+      - name: Linting and fixing
+        run: npm run fix
+
+      - name: Commit changes
+        run: |
+          git add .
+
+          # Only commit if there are changes
+          git diff-index --quiet HEAD || git commit -m "i18n: pull translation from Lokalise"
+
+          # Save SHA of the latest commit to locale
+          echo "LAST_COMMIT_SHA_PULL=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales)" >> $GITHUB_ENV
+
+      - name: Push changes
+        run: |
+
+          git pull origin ${{ github.event.repository.default_branch }} || {
+            echo "Failed to pull from ${{ github.event.repository.default_branch }}."
+            echo "Please manually pull the changes, solve potential conflicts, and re-run the workflow."
+            echo "::error title=Pull failed::Failed to pull from ${{ github.event.repository.default_branch }}."
+            exit 1
+          }
+
+          git push origin $BRANCH
+
+      - name: Check if has differences between ${{ env.BRANCH }} and ${{ github.event.repository.default_branch }}
+        id: check-diff
+        run: |
+          DIFF=$(git diff --name-only $BRANCH origin/${{ github.event.repository.default_branch }})
+          if [[ -z $DIFF ]]; then
+            echo "No difference between $BRANCH and ${{ github.event.repository.default_branch }}."
+            echo "SKIP=true" >> $GITHUB_OUTPUT
+          fi
+
+          echo "LAST_COMMIT_SHA_PUSH=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV
+
+      - name: Create a new i18n PR if not exists
+        uses: actions/github-script@v7
+        if: steps.check-diff.outputs.SKIP != 'true'
+        with:
+          github-token: ${{ steps.generate-token.outputs.token }}
+          script: |
             const prInfo = await github.rest.pulls.list({
               owner: context.repo.owner,
               repo: context.repo.repo,
@@ -158,7 +158,7 @@ jobs:
             - [ ] 📦 Chore (Release)
             - [ ] ⏩ Revert
             - [x] 🌐 Internationalization / Translation
-            
+
             ## Description
             ### i18n Actions: \`.i18n-update-scheduled\`
             Scheduled update of source texts and translations.
diff --git a/.vscode/html.html-data.json b/.vscode/html.html-data.json
index c36ded006b..fab3238603 100644
--- a/.vscode/html.html-data.json
+++ b/.vscode/html.html-data.json
@@ -37,4 +37,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37abf99545..d1e729a1a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. See [standa
 
 ---
 
+## [sdk-v0.11.0](https://github.com/live-codes/livecodes/compare/sdk-v0.10.0...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](https://github.com/live-codes/livecodes/compare/sdk-v0.10.0...v45) (2025-04-25)
 
 ### Highlights for this release
diff --git a/README.md b/README.md
index af3bc635c6..c9360e511e 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes)
-[![LiveCodes: languages](https://img.shields.io/badge/languages-95-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-96-blue)](https://livecodes.io/docs/languages/)
 [![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/)
 [![LiveCodes: llms.txt](https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms.txt)
 [![LiveCodes: llms-full.txt](https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms-full.txt)
diff --git a/docs/docs/features/tests.mdx b/docs/docs/features/tests.mdx
index 344fc4f553..f9992d44ef 100644
--- a/docs/docs/features/tests.mdx
+++ b/docs/docs/features/tests.mdx
@@ -58,11 +58,16 @@ The tests panel and the test editor are always shown in the [full standalone app
 ## Supported Languages
 
 The testing code can be written using JavaScript, TypeScript, JSX or TSX.
-However, since the tests are run against the result web page, they can test projects that use any language/framework.
+However, since the tests run against the result web page, they can test projects that use any language/framework.
 
-This is <a href="https://livecodes.io/?x=id/3i8wrwcwhud&tests" target="_blank">a demo</a> for running tests against a Python project.
+This is [a demo](https://livecodes.io/?x=id/xyi6usem2sf&tests) for running tests against a Ruby project.
+
+<LiveCodes import="id/xyi6usem2sf" params={{tests: "open"}} height="80vh"></LiveCodes>
+
+Languages may have test modules. This is [an example](https://livecodes.io/?x=id/665ar3bpqka&console=full) of running [Python doctest](https://docs.python.org/3/library/doctest.html) tests:
+
+<LiveCodes import="id/665ar3bpqka" params={{console: "full"}} height="80vh"></LiveCodes>
 
-<LiveCodes import="id/3i8wrwcwhud" params={{tests: "open"}}></LiveCodes>
 
 ## Importing Code
 
diff --git a/docs/docs/languages/asciidoc.mdx b/docs/docs/languages/asciidoc.mdx
index d6bce0dc2e..1cdd048746 100644
--- a/docs/docs/languages/asciidoc.mdx
+++ b/docs/docs/languages/asciidoc.mdx
@@ -1,3 +1,81 @@
 # AsciiDoc
 
-TODO...
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+[AsciiDoc](https://asciidoc.org) is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.
+
+In LiveCodes, AsciiDoc is compiled to HTML using [Asciidoctor](https://asciidoctor.org/).
+
+## Usage
+
+### Demo
+
+export const asciidocConfig = {
+  markup: {
+    language: 'asciidoc',
+    content: `= AsciiDoc Demo
+
+== Features
+
+* Simple
+* Clean
+* Dev-friendly
+`,
+  },
+}
+
+<LiveCodes config={asciidocConfig} height='70vh' />
+
+## Language Info
+
+### Name
+
+`asciidoc`
+
+### Extensions
+
+`adoc`, `asc`
+
+## Editor
+
+`markup`
+
+## Compiler
+
+[Asciidoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/)
+
+### Version
+
+Asciidoctor.js: `v2.2.8`
+
+## Code Formatting
+
+Not supported.
+
+## Custom Settings
+
+[Custom settings](../advanced/custom-settings.mdx) added to the property `asciidoc` are passed as a JSON object to the [`convert()`](https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/#your-first-conversion) function during compile.
+Please check the [documentation](https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/) and [document attributes](https://docs.asciidoctor.org/asciidoc/latest/attributes/document-attributes-ref/) for full reference.
+
+Please note that custom settings should be valid JSON (i.e. functions are not allowed).
+
+```json
+{
+  "asciidoc": {
+    "attributes": {
+      "source-highlighter": "highlight.js",
+      "icons": "font"
+    }
+  }
+}
+```
+
+## Limitations
+
+- Some advanced extensions may not work (e.g. diagrams)
+
+## Links
+
+- [AsciiDoc](https://asciidoc.org)
+- [Asciidoctor](https://asciidoctor.org/)
+- [AsciiDoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/)
diff --git a/docs/docs/languages/html.mdx b/docs/docs/languages/html.mdx
index a24796ab97..88498534b8 100644
--- a/docs/docs/languages/html.mdx
+++ b/docs/docs/languages/html.mdx
@@ -1,3 +1,68 @@
 # HTML
 
-TODO...
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+
+HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages.
+
+## Usage
+
+HTML code in the [markup editor](../features/projects.mdx#markup-editor) is added as is without compilation or processing to the body of the [result page](../features/result.mdx).
+
+There is no need to add a full page structure (e.g. `<html>`, `<head>`, `<body>` tags). This is already handled by LiveCodes.
+(See [Result Page Structure](../features/result.mdx#result-page-structure) for more details.)
+
+If you need to add content to the `<head>` section or `<html>` attributes of the result page, you can add it in the [project info screen](https://livecodes.io/?screen=info).
+
+### Demo
+
+
+export const htmlOnlyConfig = {
+  markup: {
+    language: 'html',
+    content: `<h1>Hello, LiveCodes!</h1>
+<p>This is a paragraph in HTML.</p>
+<ul>
+  <li>Simple</li>
+  <li>Structured</li>
+  <li>Semantic</li>
+</ul>
+`,
+  },
+}
+
+<LiveCodes config={htmlOnlyConfig} />
+
+### Styles and JavaScript
+
+Most of the time, you will want to add styles and scripts in the [respective editors](../features/projects.mdx).
+However, you can of course still add them in `<link>`, `<style>` and `<script>` tags in HTML.
+This can be useful in different scenarios, such as adding global variables that are then used in the script editor,
+or adding JavaScript together with a different script editor language (e.g. see [SQL starter template](https://livecodes.io/?template=sql&activeEditor=markup))
+
+## Language Info
+
+### Name
+
+`html`
+
+### Extensions
+
+`.html`, `.htm`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+None.
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Links
+
+- [HTML: HyperText Markup Language (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML)
+- [HTML Tutorial (W3Schools)](https://www.w3schools.com/html/)
diff --git a/docs/docs/languages/jinja.mdx b/docs/docs/languages/jinja.mdx
new file mode 100644
index 0000000000..827bf8f807
--- /dev/null
+++ b/docs/docs/languages/jinja.mdx
@@ -0,0 +1,151 @@
+# Jinja
+
+[Jinja](https://jinja.palletsprojects.com/) is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.
+
+LiveCodes uses a [minimalistic JavaScript implementation](https://github.com/huggingface/huggingface.js/tree/main/packages/jinja).
+
+## Usage
+
+There are 2 modes for rendering:
+
+### Pre-rendered (Default)
+
+The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.mdx).
+
+The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.mdx) to the property `template.data` which accepts an object of key-value pairs.
+
+Example: This provides the value of the expression `name`
+
+```json title="Custom Settings"
+{
+  "template": {
+    "data": {
+      "name": "LiveCodes"
+    }
+  }
+}
+```
+
+[Full example below](#pre-rendered)
+
+### Dynamic
+
+To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.mdx) should be set to `false`.
+
+Example:
+
+```json title="Custom Settings"
+{
+  "template": {
+    "prerender": false
+  }
+}
+```
+
+In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.mdx) runtime.
+
+This can be achieved in JavaScript (or any [language](../languages/index.mdx) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
+
+Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
+
+Example:
+
+```js title="Script Editor (JS)"
+window.livecodes.templateData = { name: 'LiveCodes' };
+```
+
+[Full example below](#dynamic-1)
+
+## Language Info
+
+### Name
+
+`jinja`
+
+### Extension
+
+`.jinja`
+
+### Editor
+
+`markup`
+
+## Compiler
+
+[@huggingface/jinja](https://www.npmjs.com/package/@huggingface/jinja).
+
+### Version
+
+`@huggingface/jinja`: v0.5.0
+
+## Code Formatting
+
+Using `@huggingface/jinja` integrated formatted.
+
+## Example Usage
+
+import LiveCodes from '../../src/components/LiveCodes';
+
+### Pre-rendered
+
+export const config = {
+  markup: { language: 'jinja', content: `<ul id="navigation">
+{% for item in navigation %}
+    <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
+{% endfor %}
+</ul>
+
+<h1>My Webpage</h1>
+{{ a_variable }}
+
+` },
+  customSettings: { template: { data: {
+  navigation: [
+    { href: "/", caption: "Home" },
+    { href: "/about", caption: "About" },
+    { href: "/contact", caption: "Contact" },
+  ],
+  a_variable: "Hello World!",
+} } },
+};
+
+export const params = { compiled: 'open' };
+
+<LiveCodes config={config} params={params}></LiveCodes>
+
+### Dynamic
+
+export const config2 = {
+  markup: { language: 'jinja', content: `<ul id="navigation">
+{% for item in navigation %}
+    <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
+{% endfor %}
+</ul>
+
+<h1>My Webpage</h1>
+{{ a_variable }}
+
+` },
+  script: {
+    language: 'javascript',
+    content: `window.livecodes.templateData = {
+  navigation: [
+    { href: "/", caption: "Home" },
+    { href: "/about", caption: "About" },
+    { href: "/contact", caption: "Contact" },
+  ],
+  a_variable: "Hello World!",
+};`,
+  },
+  customSettings: { template: { prerender: false } },
+  activeEditor: 'script',
+};
+
+<LiveCodes config={config2}></LiveCodes>
+
+## Links
+
+- [Jinja](https://jinja.palletsprojects.com/)
+- [Template Documentation](https://jinja.palletsprojects.com/en/stable/templates/)
+- [`@huggingface/jinja`](https://www.npmjs.com/package/@huggingface/jinja)
+
diff --git a/docs/docs/languages/react.mdx b/docs/docs/languages/react.mdx
index 1f3abbd4e2..b108559084 100644
--- a/docs/docs/languages/react.mdx
+++ b/docs/docs/languages/react.mdx
@@ -256,7 +256,7 @@ export const styledComponentsDemo = {
 
 ### Version
 
-`babel-plugin-react-compiler`: v19.0.0-beta-e993439-20250405
+`babel-plugin-react-compiler`: v19.1.0-rc.1
 
 ## Code Formatting
 
diff --git a/docs/docs/markdown-to-livecodes.mdx b/docs/docs/markdown-to-livecodes.mdx
new file mode 100644
index 0000000000..718f2a2576
--- /dev/null
+++ b/docs/docs/markdown-to-livecodes.mdx
@@ -0,0 +1,582 @@
+# Markdown to LiveCodes
+
+Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.
+
+The playgrounds can run any of the supported [languages](./languages/index.mdx) in LiveCodes, and can be customized to any of the [configuration options](./configuration/index.mdx).
+
+A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the `livecodes` parameter to the code block language meta.
+
+This is provided as [plugins](#packages) for [markdown-it](https://github.com/markdown-it/markdown-it), [marked](https://github.com/markedjs/marked) and [remark](https://github.com/remarkjs/remark).
+These plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "[Using with Frameworks](#using-with-frameworks)" for getting started.
+
+## Demo
+
+This is an example code block:
+
+````md
+```jsx
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+````
+
+The above code block is normally rendered like this:
+
+```jsx
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+
+<br />
+
+The code block can instead be rendered as an interactive playground by adding the `livecodes` parameter to the code block language meta:
+
+````md {1}
+```jsx livecodes
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+````
+
+to be displayed like this:
+
+```jsx livecodes
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+
+<br />
+<br />
+
+The playground can be customized by setting [options](#options) that are applied to all code blocks or by [meta parameters](#meta-parameters) that are applied to individual code blocks.
+
+Alternatively, the code block can be kept as it is, and a button or a link (**Edit in LiveCodes**) is appended, below the code block, that opens the code in a LiveCodes playground.
+This is achieved by adding the `render=button` or `render=link` parameter to the code block language meta.
+
+This displays a button:
+
+````md {1}
+```jsx livecodes render=button
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+````
+
+```jsx livecodes render=button
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+<br />
+<br />
+While this displays a link:
+
+````md {1}
+```jsx livecodes render=link
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+````
+
+```jsx livecodes render=link
+import { useState } from "react";
+
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Packages
+
+All the functionality described here can be achieved using *any* of the following packages:
+
+- [`markdown-it-livecodes`](https://www.npmjs.com/package/markdown-it-livecodes): A [markdown-it](https://github.com/markdown-it/markdown-it) plugin.
+- [`marked-livecodes`](https://www.npmjs.com/package/marked-livecodes): A [marked](https://github.com/markedjs/marked) plugin.
+- [`remark-livecodes`](https://www.npmjs.com/package/remark-livecodes): A [remark](https://github.com/remarkjs/remark) plugin.
+- [`gatsby-remark-livecodes`](https://www.npmjs.com/package/gatsby-remark-livecodes): A [gatsby](https://github.com/gatsbyjs/gatsby) plugin.
+
+See the section "[Using with Frameworks](#using-with-frameworks)" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc.
+
+## Usage
+
+### markdown-it-livecodes
+
+To use the `markdown-it-livecodes` plugin, first install it:
+
+```bash npm2yarn
+npm install markdown-it markdown-it-livecodes
+```
+
+Then it can be used like this:
+
+````js
+import markdownIt from "markdown-it";
+import markdownItLivecodes from "markdown-it-livecodes";
+
+const input = "```js livecodes \nconsole.log('Hello World!');\n```";
+
+const output = markdownIt()
+  .use(markdownItLivecodes, {
+    /* options */
+  })
+  .render(input);
+
+console.log(output); // <iframe ...></iframe>
+````
+
+### marked-livecodes
+
+To use the `marked-livecodes` plugin, first install it:
+
+```bash npm2yarn
+npm install marked marked-livecodes
+```
+
+Then it can be used like this:
+
+````js
+import marked from "marked";
+import markedLivecodes from "marked-livecodes";
+
+const input = "```js livecodes \nconsole.log('Hello World!');\n```";
+
+const output = await marked
+  .use(markedLivecodes, {
+    /* options */
+  })
+  .parse(input);
+
+console.log(output); // <iframe ...></iframe>
+````
+
+### remark-livecodes
+
+To use the `remark-livecodes` plugin, first install it:
+
+```bash npm2yarn
+npm install remark remark-livecodes
+```
+
+Then it can be used like this:
+
+````js
+import { remark } from "remark";
+import remarkLivecodes from "remark-livecodes";
+
+const input = "```js livecodes \nconsole.log('Hello World!');\n```";
+
+const output = await remark()
+  .use(remarkLivecodes, {
+    /* options */
+  })
+  .process(input);
+
+console.log(String(output)); // <iframe ...></iframe>
+````
+
+### gatsby-remark-livecodes
+
+See usage with [Gatsby](#gatsby).
+
+## Options
+
+Options can be passed to the plugins. These options apply to all code blocks.
+
+These options include LiveCodes SDK [embed options](./sdk/js-ts.mdx#embed-options) (except `headless`).
+
+Example:
+
+````js
+const output = await remark()
+  .use(remarkLivecodes, {
+    // highlight-start
+    loading: "click",
+    params: {
+      console: "open"
+      theme: "light",
+    }
+    // highlight-end
+  })
+  .process(input);
+````
+
+In addition, the following options are also available:
+
+- `render`: The render mode for the LiveCodes playgrounds. This can be one of the following:
+  - `playground` (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, [`"simple"` mode](./features/display-modes.mdx) is used, but this can be changed in [options](#options) or [meta parameters](#meta-parameters).
+  - `link`: Keeps the code block as it is, and appends a link (**Edit in LiveCodes**), below the code block, that opens the code in a LiveCodes playground.
+  - `button`: Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.<br />
+    <img src="https://dev.livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg" alt="Edit in LiveCodes button" style={{height: "28px"}} />
+  - `meta`: Keeps the code block as it is, and adds the URL of the playground to the `data-livecodes-url` attribute of the `<code>` element. In addition, in `remark-livecodes` the URL is added to the AST (`node.data.livecodesUrl` and `node.data.hProperties.dataLivecodesUrl`). In `markdown-it-livecodes` the URL is added to `env.livecodesUrl`.
+    This can be used by other plugins (e.g. to display a custom run button overlying the code block).
+- `height`: The height of the playground iframe.
+- `className`: The class name to be applied to the iframe, link or button.
+  Note: If the class name of the button contains `"dark"` (e.g. `"dark-btn"`), the dark button will be used.<br />
+  <img src="https://dev.livecodes.io/livecodes/assets/images/edit-in-livecodes-button-dark.svg" alt="Edit in LiveCodes button" style={{height: "28px"}} />
+- `auto`: When set to `true`, it automatically enables the `livecodes` parameter for all code blocks without having to explicitly add it.
+  This is useful when you have a large number of code blocks and don't want to add the `livecodes` parameter to each code block.
+  To disable this for a specific code block, add the `livecodes=false` [meta parameter](#meta-parameters) to the code block.
+
+## Meta Parameters
+
+Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name.
+
+Meta parameters of code blocks override the [options](#options) passed to the plugin.
+
+Example:
+
+````markdown {1}
+```jsx livecodes render=button className=dark-btn console=open
+import { useState, useEffect } from "react";
+
+export default () => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    console.log("count:", count);
+  }, [count]);
+
+  return (
+    <div>
+      <p>You clicked {count} times.</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+};
+```
+````
+
+All LiveCodes [configuration query parameters](./configuration/query-params.mdx) can be used as code block meta parameters (e.g. ` ```js livecodes console=open theme=light`). See the [LiveCodes configuration docs](./configuration/configuration-object.mdx) for more information.
+
+In addition, the following meta parameters are available:
+
+- `livecodes`: Enables the LiveCodes playground for the code block. This can be omitted if the `auto` option is set to `true`. When `livecodes` is set to `false`, the code block is not handled by the plugin.
+- `render`: The render mode. See the [Options](#options) section for more information.
+- `height`: The height of the playground iframe.
+- `className`: The class name for the playground iframe, link or button.
+- `lang`: This overrides the language of the code block (e.g. ` ```jsx livecodes lang=react` or ` ```py livecodes lang=py-wasm`). See the [Languages](./languages/index.mdx) docs for more language information.
+
+## Using with Frameworks
+
+This guide shows how to use the suitable plugin in different frameworks.
+
+### Astro
+
+([demo](https://markdown-to-livecodes-astro.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-astro))
+
+Install the `remark-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D remark-livecodes
+```
+
+This is an example for adding the `remark-livecodes` plugin to `astro.config.mjs` file:
+
+```js title="astro.config.js"
+import { defineConfig } from "astro/config";
+import mdx from "@astrojs/mdx";
+import remarkLivecodes from "remark-livecodes";
+
+export default defineConfig({
+  // ...
+  integrations: [mdx()],
+  markdown: {
+    remarkPlugins: [
+      [remarkLivecodes, { /* options */ }],
+    ],
+  },
+});
+```
+
+### Docusaurus
+
+([demo](https://markdown-to-livecodes-docusaurus.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-docusaurus))
+
+Install the `remark-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D remark-livecodes
+```
+
+This is an example for adding the `remark-livecodes` plugin to `docusaurus.config.js` file:
+
+```js title="docusaurus.config.js"
+export default {
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          // ...
+          remarkPlugins: [
+            [require('remark-livecodes'), { /* options */ }],
+          ],
+        },
+      },
+    ],
+  ],
+  // ...
+};
+```
+
+### Eleventy
+
+([demo](https://markdown-to-livecodes-11ty.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-11ty))
+
+Install the `markdown-it-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D markdown-it-livecodes
+```
+
+This is an example for adding the `markdown-it-livecodes` plugin to `eleventy.config.js` file:
+
+```js title="eleventy.config.js"
+import markdownItLivecodes from "markdown-it-livecodes";
+
+export default async function (eleventyConfig) {
+  eleventyConfig.amendLibrary("md", (mdLib) =>
+    mdLib.use(markdownItLivecodes, { /* options */ }),
+  );
+  // ...
+}
+```
+
+### Gatsby
+
+([demo](https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-gatsby))
+
+Install the `gatsby-remark-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D gatsby-remark-livecodes
+```
+
+This is an example for adding the `gatsby-remark-livecodes` plugin to `gatsby-config.js` file:
+
+```js title="gatsby-config.js"
+module.exports = {
+  // ...
+  plugins: [
+    // ...
+    {
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          {
+            resolve: 'gatsby-remark-livecodes',
+            options: { /* options */ },
+          },
+        ],
+      },
+    },
+  ],
+};
+```
+
+### Next.js
+
+([demo](https://markdown-to-livecodes-nextjs.pages.dev/mdx-page) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-nextjs))
+
+See [Next.js docs](https://nextjs.org/docs/app/guides/mdx) for using markdown and MDX in Next.js.
+
+Install the `remark-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D remark-livecodes
+```
+
+This is an example for adding the `remark-livecodes` plugin to `next.config.js` file:
+
+```js title="next.config.js"
+import createMDX from "@next/mdx";
+import remarkLivecodes from "remark-livecodes";
+
+const nextConfig = {
+  // ...
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
+};
+
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [
+      [remarkLivecodes, { /* other options */ }],
+    ],
+  },
+});
+
+export default withMDX(nextConfig);
+```
+
+When using Turbopack for local development, check the guide for [using plugins with Turbopack](https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack).
+
+### react-markdown
+
+`react-markdown` is a React component to render markdown.
+
+This is an example for using the `remark-livecodes` plugin with `react-markdown`:
+
+Install the `remark-livecodes` plugin:
+
+```bash npm2yarn
+npm install remark-livecodes
+```
+
+```jsx title="App.jsx" livecodes render=button
+import Markdown from 'react-markdown';
+import remarkLivecodes from 'remark-livecodes';
+
+const markdown =
+  '```jsx livecodes\nexport default () => <h1>Hello World</h1>\n```';
+
+export default () => (
+  <Markdown remarkPlugins={[[remarkLivecodes, { /* options */ }]]}>
+    {markdown}
+  </Markdown>
+);
+```
+
+### Storybook
+
+([demo](https://markdown-to-livecodes-storybook.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-storybook))
+
+Install the `remark-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D remark-livecodes
+```
+
+This is an example for adding the `remark-livecodes` plugin to `storybook/main.js` file:
+
+```js title="storybook/main.js"
+import remarkLivecodes from "remark-livecodes";
+
+export default {
+  // ...
+  addons: [
+    // ...
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [
+              [remarkLivecodes, { /* options */ }],
+            ],
+          },
+        },
+      },
+    },
+  ],
+};
+```
+
+### VitePress
+
+([demo](https://markdown-to-livecodes-vitepress.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-vitepress))
+
+Install the `markdown-it-livecodes` plugin:
+
+```bash npm2yarn
+npm install -D markdown-it-livecodes
+```
+
+This is an example for adding the `markdown-it-livecodes` plugin to `vitepress.config.js` file:
+
+```js title=".vitepress/config.js"
+import { defineConfig } from "vitepress";
+import markDownItLivecodes from "markdown-it-livecodes";
+
+export default defineConfig({
+  // ...
+  markdown: {
+    config: (md) => {
+      md.use(markDownItLivecodes, { /* options */ });
+    },
+  },
+});
+```
diff --git a/docs/docs/sdk/js-ts.mdx b/docs/docs/sdk/js-ts.mdx
index e97be5cf83..1eb4ef14f4 100644
--- a/docs/docs/sdk/js-ts.mdx
+++ b/docs/docs/sdk/js-ts.mdx
@@ -71,6 +71,15 @@ The `createPlayground` function throws an error (promise is rejected) in any of
 
 :::
 
+### Multiple Sources
+
+When multiple sources are provided in the [embed options](#embed-options), each is converted to a [configuration object](../configuration/configuration-object.mdx) and the properties are merged.
+In case there are conflicts between the properties of the configurations, they are overridden in the following order:
+- [`template`](#template) (lowest precedence)
+- [`import`](#import)
+- [`config`](#config)
+- [`params`](#params) (highest precedence)
+
 ## `getPlaygroundUrl`
 
 Type: [`(options?: EmbedOptions) => string`](../api/functions/getPlaygroundUrl.md)
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 8d2bbce063..8fad778b85 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -1,5 +1,5 @@
-import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+import type { Config } from '@docusaurus/types';
 import { themes } from 'prism-react-renderer';
 
 import appPkg from '../package.json';
@@ -40,6 +40,7 @@ const config: Config = {
               require('@docusaurus/remark-plugin-npm2yarn'),
               { sync: true, converters: ['yarn', 'pnpm', 'bun'] },
             ],
+            require('remark-livecodes'),
           ],
         },
         blog: false,
@@ -226,7 +227,7 @@ const config: Config = {
     prism: {
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,
-      additionalLanguages: ['bash', 'csharp', 'java'],
+      additionalLanguages: ['bash', 'csharp', 'java', 'markdown'],
     },
     algolia: {
       appId: 'H9Z2PKYS80',
diff --git a/docs/package-lock.json b/docs/package-lock.json
index ed96a4c01d..d80d763f82 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -18,7 +18,8 @@
         "prism-react-renderer": "2.4.1",
         "react": "19.0.0",
         "react-dom": "19.0.0",
-        "react-responsive-carousel": "3.2.22"
+        "react-responsive-carousel": "3.2.22",
+        "remark-livecodes": "0.2.1"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "3.7.0",
@@ -10310,6 +10311,11 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/livecodes": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/livecodes/-/livecodes-0.10.0.tgz",
+      "integrity": "sha512-ug8ocy3qp6Gk7Ss1518tg5+7z5YolRQEN5UozS0gzXHEXQQCa5ZwP41aGt3g6xcPw+K7aupI7O43AsC5wlPpUQ=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -15597,6 +15603,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-livecodes": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/remark-livecodes/-/remark-livecodes-0.2.1.tgz",
+      "integrity": "sha512-WK1YffDgk2D9Y2Y4aM5ClozoPj3bVQVm9Y1GYOqGBNulbmiFvb/wDLBQEQlXn8OmU8kZV3QHKuZVrvD+Xym5Cg==",
+      "dependencies": {
+        "@types/mdast": "4.0.4",
+        "livecodes": "0.10.0",
+        "mdast-util-from-markdown": "2.0.2",
+        "mdast-util-mdx": "3.0.0",
+        "mdast-util-to-string": "4.0.0",
+        "micromark-extension-mdxjs": "3.0.0",
+        "unist-builder": "4.0.0",
+        "unist-util-is": "6.0.0",
+        "unist-util-visit": "5.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/hatemhosny"
+      }
+    },
     "node_modules/remark-mdx": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz",
@@ -17115,6 +17140,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/unist-builder": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-4.0.0.tgz",
+      "integrity": "sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
diff --git a/docs/package.json b/docs/package.json
index 6ee98b01d3..3f9dbe3d7e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -25,7 +25,8 @@
     "prism-react-renderer": "2.4.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-responsive-carousel": "3.2.22"
+    "react-responsive-carousel": "3.2.22",
+    "remark-livecodes": "0.2.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
index 0e9f67bc74..53261183d8 100644
--- a/docs/sidebars.ts
+++ b/docs/sidebars.ts
@@ -112,6 +112,7 @@ const sidebars: SidebarsConfig = {
         },
         'bookmarklet',
         'gh-action',
+        'markdown-to-livecodes',
         'contribution',
         'credits',
         'license',
diff --git a/docs/src/components/HomepageFeatures.tsx b/docs/src/components/HomepageFeatures.tsx
index 7c67a1b135..6bc9436efb 100644
--- a/docs/src/components/HomepageFeatures.tsx
+++ b/docs/src/components/HomepageFeatures.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable import/no-unresolved */
 import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import CodeBlock from '@theme/CodeBlock';
 
-import type { ReactNode } from 'react';
 import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import HomepageCarousel from './HomepageCarousel';
 import styles from './HomepageFeatures.module.css';
-import LiveCodes from './LiveCodes';
 import Sliders from './LanguageSliders';
-import HomepageCarousel from './HomepageCarousel';
+import LiveCodes from './LiveCodes';
 
 interface FeatureItem {
   title: string;
diff --git a/docs/src/components/LanguageSliders.tsx b/docs/src/components/LanguageSliders.tsx
index 1b1630e8da..e1daff5ac6 100644
--- a/docs/src/components/LanguageSliders.tsx
+++ b/docs/src/components/LanguageSliders.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unresolved */
-import { useEffect, useState } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import Link from '@docusaurus/Link';
+import { useEffect, useState } from 'react';
 import styles from './LanguageSliders.module.css';
 
 const getRandomItem = (list: any[]) => ({
@@ -29,6 +29,7 @@ export default function Sliders() {
       { name: 'twig', title: 'Twig' },
       { name: 'vento', title: 'Vento' },
       { name: 'art-template', title: 'art-template' },
+      { name: 'jinja', title: 'Jinja' },
       { name: 'bbcode', title: 'BBCode' },
       { name: 'mjml', title: 'MJML' },
       { name: 'diagrams', title: 'Diagrams' },
diff --git a/docs/src/components/LiveCodes.tsx b/docs/src/components/LiveCodes.tsx
index 3f4ebdecd6..dd5e93feb3 100644
--- a/docs/src/components/LiveCodes.tsx
+++ b/docs/src/components/LiveCodes.tsx
@@ -3,8 +3,8 @@ import { useColorMode } from '@docusaurus/theme-common';
 import type { EmbedOptions } from '../../../src/sdk';
 import LiveCodesReact from '../../../src/sdk/react';
 import { appUrl } from '../utils';
-import ShowCode from './ShowCode';
 import styles from './LiveCodes.module.css';
+import ShowCode from './ShowCode';
 
 export default function LiveCodes(
   props: EmbedOptions & {
diff --git a/docs/src/components/ShowCode.tsx b/docs/src/components/ShowCode.tsx
index 56e6a624a7..68185c2e03 100644
--- a/docs/src/components/ShowCode.tsx
+++ b/docs/src/components/ShowCode.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable import/no-unresolved */
 
-import { useState, useRef, useEffect, type ReactNode } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import CodeBlock from '@theme/CodeBlock';
-import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import detailsStyles from '../../node_modules/@docusaurus/theme-common/src/components/Details/styles.module.css';
+import Tabs from '@theme/Tabs';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import detailsStyles2 from '../../node_modules/@docusaurus/theme-classic/src/theme/Details/styles.module.css';
+import detailsStyles from '../../node_modules/@docusaurus/theme-common/src/components/Details/styles.module.css';
 
 export default function ShowCode(props: {
   js: string;
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 073152ce6a..dd21d4c655 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable import/no-unresolved */
-import { useEffect } from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import clsx from 'clsx';
+import { useEffect } from 'react';
 import HomepageFeatures from '../components/HomepageFeatures';
 import { loadAds } from '../custom-content';
 import styles from './index.module.css';
diff --git a/docs/src/sponsors-list.ts b/docs/src/sponsors-list.ts
index 9ca66b1cf4..d8f880c523 100644
--- a/docs/src/sponsors-list.ts
+++ b/docs/src/sponsors-list.ts
@@ -19,8 +19,8 @@ export const createSponsorsList = (sponsors: Sponsor[]) => `
 const createSponsorItem = (sponsor: Sponsor) => `
 <li>
   <a href="${sponsor.url}" target="_blank" rel="noopener" ${
-  sponsor.style ? 'style="' + sponsor.style + '"' : ''
-} ${sponsor.title ? 'title="' + sponsor.title + '"' : ''}>
+    sponsor.style ? 'style="' + sponsor.style + '"' : ''
+  } ${sponsor.title ? 'title="' + sponsor.title + '"' : ''}>
     ${
       sponsor.image
         ? '<img loading="lazy" alt="' + sponsor.title + '" src="' + sponsor.image + '">'
diff --git a/docs/src/theme/DocItem/Layout/index.tsx b/docs/src/theme/DocItem/Layout/index.tsx
index 883131b762..075fb94cad 100644
--- a/docs/src/theme/DocItem/Layout/index.tsx
+++ b/docs/src/theme/DocItem/Layout/index.tsx
@@ -1,19 +1,19 @@
 /* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { type ReactNode } from 'react';
-import clsx from 'clsx';
-import { useWindowSize } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
-import DocItemPaginator from '@theme/DocItem/Paginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
-import DocItemFooter from '@theme/DocItem/Footer';
-import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
-import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
-import DocItemContent from '@theme/DocItem/Content';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import { useWindowSize } from '@docusaurus/theme-common';
 import ContentVisibility from '@theme/ContentVisibility';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import DocItemContent from '@theme/DocItem/Content';
+import DocItemFooter from '@theme/DocItem/Footer';
 import type { Props } from '@theme/DocItem/Layout';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import clsx from 'clsx';
+import { type ReactNode } from 'react';
 
 import styles from './styles.module.css';
 
diff --git a/docs/src/theme/Heading/index.tsx b/docs/src/theme/Heading/index.tsx
index fe4534f47d..79cf3db1ff 100644
--- a/docs/src/theme/Heading/index.tsx
+++ b/docs/src/theme/Heading/index.tsx
@@ -1,8 +1,8 @@
-import React, { type ReactNode, useContext, useEffect } from 'react';
+import type { WrapperProps } from '@docusaurus/types';
+import { useContext, useEffect, type ReactNode } from 'react';
 // eslint-disable-next-line import/no-unresolved
 import Heading from '@theme-original/Heading';
 import type HeadingType from '@theme/Heading';
-import type { WrapperProps } from '@docusaurus/types';
 import { CustomContentContext, loadAds } from '../../custom-content';
 import styles from './styles.module.css';
 
diff --git a/docs/src/theme/TOCItems/index.tsx b/docs/src/theme/TOCItems/index.tsx
index 6fa4bc7ba1..21dc978d3f 100644
--- a/docs/src/theme/TOCItems/index.tsx
+++ b/docs/src/theme/TOCItems/index.tsx
@@ -1,8 +1,8 @@
-import React, { type ReactNode, useContext } from 'react';
+import type { WrapperProps } from '@docusaurus/types';
+import { useContext, type ReactNode } from 'react';
 // eslint-disable-next-line import/no-unresolved
 import TOCItems from '@theme-original/TOCItems';
 import type TOCItemsType from '@theme/TOCItems';
-import type { WrapperProps } from '@docusaurus/types';
 import { CustomContentContext } from '../../custom-content';
 import styles from './styles.module.css';
 
diff --git a/e2e/specs/compilers.spec.ts b/e2e/specs/compilers.spec.ts
index cc7c22303a..bba6112526 100644
--- a/e2e/specs/compilers.spec.ts
+++ b/e2e/specs/compilers.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('Compiler Results', () => {
   test('HTML/CSS/JS', async ({ page, getTestUrl }) => {
@@ -692,6 +692,60 @@ const title = "World";
     expect(resultText).toContain('Welcome to art-template');
   });
 
+  test('jinja', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"data":{"name": "jinja"}}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Jinja"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to jinja');
+  });
+
+  test('jinja dynamic', async ({ page, getTestUrl }) => {
+    await page.goto(getTestUrl());
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await app.click('[aria-label="Project"]');
+    await app.click('text=Custom Settings');
+    await waitForEditorFocus(app, '#custom-settings-editor');
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type(`{"template":{"prerender": false}}`);
+    await app.click('button:has-text("Load"):visible');
+
+    await app.click(':nth-match([title="Change Language"], 3)');
+    await app.click('text=JavaScript');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`window.livecodes.templateData = { name: 'jinja' };`);
+
+    await app.click(':nth-match([title="Change Language"], 1)');
+    await app.click('text="Jinja"');
+    await waitForEditorFocus(app);
+    await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);
+
+    await waitForResultUpdate();
+    await app.waitForTimeout(3000);
+    const resultText = await getResult().innerHTML('h1');
+
+    expect(resultText).toContain('Welcome to jinja');
+  });
+
   test('BBCode', async ({ page, getTestUrl }) => {
     await page.goto(getTestUrl());
 
diff --git a/e2e/specs/config.spec.ts b/e2e/specs/config.spec.ts
index 458ff6a7ac..ed593bc998 100644
--- a/e2e/specs/config.spec.ts
+++ b/e2e/specs/config.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('Config', () => {
   test('autoupdate', async ({ page, getTestUrl }) => {
diff --git a/e2e/specs/css-modules.spec.ts b/e2e/specs/css-modules.spec.ts
index 154eced303..0d3753f8c1 100644
--- a/e2e/specs/css-modules.spec.ts
+++ b/e2e/specs/css-modules.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('CSS Modules', () => {
   test('Default import', async ({ page, getTestUrl }) => {
diff --git a/e2e/specs/custom-settings.spec.ts b/e2e/specs/custom-settings.spec.ts
index fdc00b7eff..dee623e3c3 100644
--- a/e2e/specs/custom-settings.spec.ts
+++ b/e2e/specs/custom-settings.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('Custom Settings', () => {
   test('asciidoctor', async ({ page, getTestUrl }) => {
@@ -13,7 +13,7 @@ test.describe('Custom Settings', () => {
     await waitForEditorFocus(app, '#custom-settings-editor');
     await page.keyboard.press('Control+A');
     await page.keyboard.press('Delete');
-    await page.keyboard.type(`{"asciidoc": { standalone: true }}`);
+    await page.keyboard.type(`{"asciidoc": { standalone: true, attributes: { nofooter: false } }}`);
     await app.click('button:has-text("Load"):visible');
 
     await app.click(':nth-match([title="Change Language"], 1)');
diff --git a/e2e/specs/defaults.spec.ts b/e2e/specs/defaults.spec.ts
index 430f5fa42c..e673bb6597 100644
--- a/e2e/specs/defaults.spec.ts
+++ b/e2e/specs/defaults.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('App Defaults', () => {
   test('Title', async ({ page, getTestUrl }) => {
diff --git a/e2e/specs/i18n.spec.ts b/e2e/specs/i18n.spec.ts
index 1c99ca3bda..99541a2671 100644
--- a/e2e/specs/i18n.spec.ts
+++ b/e2e/specs/i18n.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
-import { getLoadedApp } from '../helpers';
 import type { AppLanguage, UrlQueryParams } from '../../src/livecodes/models';
+import { getLoadedApp } from '../helpers';
+import { test } from '../test-fixtures';
 
 type TestParams = Parameters<Parameters<typeof test>[1]>[0];
 
diff --git a/e2e/specs/import-map.spec.ts b/e2e/specs/import-map.spec.ts
index 5d1d627ff0..31df2cd60b 100644
--- a/e2e/specs/import-map.spec.ts
+++ b/e2e/specs/import-map.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe.skip('Import maps', () => {
   // TODO: this started timing out on CI
diff --git a/e2e/specs/import.spec.ts b/e2e/specs/import.spec.ts
index 07a4e18f11..ec20446ee3 100644
--- a/e2e/specs/import.spec.ts
+++ b/e2e/specs/import.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 const sources = {
   'GitHub gist': 'https://gist.github.com/hatemhosny/406b6775436e136cb913ad3376f411b2',
diff --git a/e2e/specs/jsx.spec.ts b/e2e/specs/jsx.spec.ts
index cdd2060372..305e98296a 100644
--- a/e2e/specs/jsx.spec.ts
+++ b/e2e/specs/jsx.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('JSX', () => {
   test('default export', async ({ page, getTestUrl }) => {
diff --git a/e2e/specs/sdk-options.spec.ts b/e2e/specs/sdk-options.spec.ts
new file mode 100644
index 0000000000..913fbcbcdd
--- /dev/null
+++ b/e2e/specs/sdk-options.spec.ts
@@ -0,0 +1,120 @@
+import { expect } from '@playwright/test';
+import { compressToEncodedURIComponent } from 'lz-string';
+import { getPlaygroundUrl, type Config, type EmbedOptions } from '../../src/sdk/index';
+import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
+
+test.describe('SDK options', () => {
+  test('params', async ({ page, getTestUrl }) => {
+    const params: EmbedOptions['params'] = {
+      md: `# Hello, World!`,
+      css: `h1 { color: red; }`,
+    };
+
+    const url = getPlaygroundUrl({ appUrl: getTestUrl(), params });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, World!');
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)');
+  });
+
+  test('config', async ({ page, getTestUrl }) => {
+    const config: Partial<Config> = {
+      markup: {
+        language: 'markdown',
+        content: `# Hello, World!`,
+      },
+      style: {
+        language: 'css',
+        content: `h1 { color: red; }`,
+      },
+    };
+
+    const url = getPlaygroundUrl({ appUrl: getTestUrl(), config });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, World!');
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)');
+  });
+
+  test('template', async ({ page, getTestUrl }) => {
+    const url = getPlaygroundUrl({ appUrl: getTestUrl(), template: 'typescript' });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, TypeScript!');
+  });
+
+  test('import', async ({ page, getTestUrl }) => {
+    const url = getPlaygroundUrl({
+      appUrl: getTestUrl(),
+      import: 'https://hatemhosny.github.io/typescript-demo-for-testing-import-/',
+    });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, World!');
+  });
+
+  test('options override: template -> import -> config -> params', async ({ page, getTestUrl }) => {
+    const url = getPlaygroundUrl({
+      appUrl: getTestUrl(),
+      template: 'react',
+      import:
+        'code/' +
+        compressToEncodedURIComponent(
+          JSON.stringify({
+            style: {
+              language: 'css',
+              content: `h1 { color: green; }`,
+            },
+            stylesheets: ['data:text/css,h2 { color: blue; }'],
+          }),
+        ),
+      config: {
+        markup: {
+          language: 'markdown',
+          content: `## Hello, from config!`,
+        },
+      },
+      params: {
+        css: `h1 { color: red; }`,
+      },
+    });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const h1 = await getResult().innerText('h1');
+    expect(h1).toBe('Hello, React!');
+    const h2 = await getResult().innerText('h2');
+    expect(h2).toBe('Hello, from config!');
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)');
+    expect(await getResult().$eval('h2', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+});
diff --git a/e2e/specs/sfc-processors.spec.ts b/e2e/specs/sfc-processors.spec.ts
index 244c09f4e4..d963959be0 100644
--- a/e2e/specs/sfc-processors.spec.ts
+++ b/e2e/specs/sfc-processors.spec.ts
@@ -1,9 +1,10 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 test.describe('Preprocessors', () => {
   test('in Vue', async ({ page, getTestUrl }) => {
+    test.slow();
     const sfc = `
 <template lang="pug">
 ul
@@ -32,6 +33,7 @@ li
     const { getResult, waitForResultUpdate } = await getLoadedApp(page);
 
     await waitForResultUpdate();
+    await getResult().waitForTimeout(3000);
 
     expect(await getResult().innerText(':nth-match(li, 1)')).toContain('hello world!');
     expect(await getResult().innerText(':nth-match(li, 2)')).toContain('p');
@@ -46,6 +48,7 @@ li
   });
 
   test('in Svelte', async ({ page, getTestUrl }) => {
+    test.slow();
     //     const sfc = `
     // <script lang="ts">
     //   export const msg: string = 'world!';
@@ -71,6 +74,7 @@ li
     const { getResult, waitForResultUpdate } = await getLoadedApp(page);
 
     await waitForResultUpdate({ timeout: 20000 });
+    await getResult().waitForTimeout(3000);
 
     expect(await getResult().innerText(':nth-match(li, 1)')).toContain('hello world!');
     expect(await getResult().innerText(':nth-match(li, 2)')).toContain('p');
diff --git a/e2e/specs/starter.spec.ts b/e2e/specs/starter.spec.ts
index 106f3a5899..d90bc48ec1 100644
--- a/e2e/specs/starter.spec.ts
+++ b/e2e/specs/starter.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
-import { test } from '../test-fixtures';
 import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
 
 const templates = [
   'JavaScript',
diff --git a/e2e/test-fixtures.ts b/e2e/test-fixtures.ts
index 48d15ec1a0..6c8b478171 100644
--- a/e2e/test-fixtures.ts
+++ b/e2e/test-fixtures.ts
@@ -13,6 +13,7 @@ export const test = base.extend<{
         editor,
         autoupdate: false,
         enableRestore: false,
+        recoverUnsaved: false,
         'no-defaults': true,
         closeBrackets: false,
         ...config,
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 00b35611ad..aab8c872fb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,16 +1,16 @@
+/* eslint-disable import/order */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/no-unresolved */
-
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { fixupConfigRules } from '@eslint/compat';
-import js from '@eslint/js';
 import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
 import typescriptEslint from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import jsdoc from 'eslint-plugin-jsdoc';
 import noOnlyTests from 'eslint-plugin-no-only-tests';
 import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
diff --git a/functions/oembed.ts b/functions/oembed.ts
index 67b2ab9234..ea6083bd45 100644
--- a/functions/oembed.ts
+++ b/functions/oembed.ts
@@ -1,4 +1,3 @@
- 
 /// <reference path="../node_modules/@cloudflare/workers-types/index.d.ts" />
 
 import { getProjectInfo } from './utils';
diff --git a/functions/utils.ts b/functions/utils.ts
index b96b729733..5c1112ce83 100644
--- a/functions/utils.ts
+++ b/functions/utils.ts
@@ -37,6 +37,14 @@ const importProject = async (url: string): Promise<ProjectInfo> => {
 };
 
 export const getProjectInfo = async (url: URL): Promise<ProjectInfo> => {
+  const title = url.searchParams.get('title');
+  const description = url.searchParams.get('description');
+  if (title || description) {
+    return {
+      title: title || '',
+      description: description || '',
+    };
+  }
   const imports = url.searchParams.get('x') || url.hash.slice(1);
   if (isCompressedCode(imports)) {
     const config = importCompressedCode(imports);
diff --git a/functions/vendors/templates.js b/functions/vendors/templates.js
index ed6a827759..10dbce55f7 100644
--- a/functions/vendors/templates.js
+++ b/functions/vendors/templates.js
@@ -3088,7 +3088,7 @@ SELECT a.id, a.rev, a.quote
                ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
           FROM quotes) a
   WHERE a.rank = 1;
-`.trimStart()}};var yt=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],xt=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],wt=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],r={getModuleUrl:(e,{isModule:s=!0,defaultCDN:i="esm.sh",external:o}={})=>{e=e.replace(/#nobundle/g,"");let a=n=>!o||!n.includes("https://esm.sh")?n:n.includes("?")?`${n}&external=${o}`:`${n}?external=${o}`,l=vt(e,s,i);return l?a(l):s?a("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,s)=>e.startsWith("http")||e.startsWith("data:")?e:vt(e,!1,s||$t())||e,cdnLists:{npm:xt,module:yt,gh:wt},checkCDNs:async(e,s)=>{let i=[s,...r.cdnLists.npm].filter(Boolean);for(let o of i)try{if((await fetch(r.getUrl(e,o),{method:"HEAD"})).ok)return o}catch{}return r.cdnLists.npm[0]}},$t=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||r.cdnLists.npm[0]}catch{return r.cdnLists.npm[0]}},vt=(e,s,i)=>{let o=s&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",wt[0]):e.includes(":")||(e=(i||(s?yt[0]:xt[0]))+":"+e);for(let a of Lt){let[l,n]=a;if(l.test(e))return e.replace(l,n)+o}return null},Lt=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:St,getModuleUrl:Oe}=r;var c=St("gh:live-codes/gleam-precompiled@v0.5.0/");var Ie=St(`livecodes@${process.env.SDK_VERSION}/vue.js`);var p=c+"build/packages/plinth/src/plinth/",m=c+"build/dev/javascript/plinth/plinth/",kt={name:"gleam",title:getTemplateName("templates.starter.gleam","Gleam Starter"),thumbnail:"assets/templates/gleam.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()}};var yt=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],xt=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],wt=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],r={getModuleUrl:(e,{isModule:s=!0,defaultCDN:i="esm.sh",external:o}={})=>{e=e.replace(/#nobundle/g,"");let a=n=>!o||!n.includes("https://esm.sh")?n:n.includes("?")?`${n}&external=${o}`:`${n}?external=${o}`,l=vt(e,s,i);return l?a(l):s?a("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,s)=>e.startsWith("http")||e.startsWith("data:")?e:vt(e,!1,s||Et())||e,cdnLists:{npm:xt,module:yt,gh:wt},checkCDNs:async(e,s)=>{let i=[s,...r.cdnLists.npm].filter(Boolean);for(let o of i)try{if((await fetch(r.getUrl(e,o),{method:"HEAD"})).ok)return o}catch{}return r.cdnLists.npm[0]}},Et=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||r.cdnLists.npm[0]}catch{return r.cdnLists.npm[0]}},vt=(e,s,i)=>{let o=s&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",wt[0]):e.includes(":")||(e=(i||(s?yt[0]:xt[0]))+":"+e);for(let a of $t){let[l,n]=a;if(l.test(e))return e.replace(l,n)+o}return null},$t=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:Lt,getModuleUrl:Oe}=r;var c=Lt("gh:live-codes/gleam-precompiled@v0.5.0/");var p=c+"build/packages/plinth/src/plinth/",m=c+"build/dev/javascript/plinth/plinth/",St={name:"gleam",title:getTemplateName("templates.starter.gleam","Gleam Starter"),thumbnail:"assets/templates/gleam.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/gleam.svg" />
@@ -3156,7 +3156,7 @@ pub fn hello(str: String) -> String
 // npm module
 @external(javascript, "npm:cowsay2", "say")
 pub fn cowsay(str: String) -> String
-`.trimStart()},customSettings:{imports:{"my_pkg/greet.js":c+"demo/greet.js"},gleam:{modules:{"plinth/browser/document":{srcUrl:p+"browser/document.gleam",compiledUrl:m+"browser/document.mjs"},"plinth/browser/element":{srcUrl:p+"browser/element.gleam",compiledUrl:m+"browser/element.mjs"},"plinth/browser/event":{srcUrl:p+"browser/event.gleam",compiledUrl:m+"browser/event.mjs"}}}}};var _t={name:"phaser",title:"Phaser Starter",thumbnail:"assets/templates/phaser.png",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()},customSettings:{imports:{"my_pkg/greet.js":c+"demo/greet.js"},gleam:{modules:{"plinth/browser/document":{srcUrl:p+"browser/document.gleam",compiledUrl:m+"browser/document.mjs"},"plinth/browser/element":{srcUrl:p+"browser/element.gleam",compiledUrl:m+"browser/element.mjs"},"plinth/browser/event":{srcUrl:p+"browser/event.gleam",compiledUrl:m+"browser/event.mjs"}}}}};var kt={name:"phaser",title:"Phaser Starter",thumbnail:"assets/templates/phaser.png",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">
   <div id="game-container"></div>
 </div>
@@ -3350,7 +3350,7 @@ const config = {
 };
 
 export default new Phaser.Game(config);
-`.trimStart()}};var jt={name:"d3",title:"D3 Starter",thumbnail:"assets/templates/d3.svg",activeEditor:"script",markup:{language:"html",content:`<div id="chart">Loading...</div>
+`.trimStart()}};var _t={name:"d3",title:"D3 Starter",thumbnail:"assets/templates/d3.svg",activeEditor:"script",markup:{language:"html",content:`<div id="chart">Loading...</div>
 `},style:{language:"css",content:`
 .bar {
   fill: steelblue;
@@ -3381,7 +3381,7 @@ svg
   .attr("height", 40)
   .attr("y", (d, i) => i * 50 + 10)
   .attr("x", 10);
-`.trimStart()}};var t="https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/",Tt={name:"shadcn-ui",title:getTemplateName("templates.starter.shadcnui","shadcn/ui Starter"),thumbnail:"assets/templates/shadcn-ui.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()}};var t="https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/",jt={name:"shadcn-ui",title:getTemplateName("templates.starter.shadcnui","shadcn/ui Starter"),thumbnail:"assets/templates/shadcn-ui.svg",activeEditor:"script",markup:{language:"html",content:`
 <link rel="stylesheet" href="${t}shadcdn.css">
 <link rel="stylesheet" href="${t}themes.css">
 `.trimStart()},style:{language:"css",content:`
@@ -3508,7 +3508,7 @@ function LoginForm({
     </div>
   );
 }
-`.trimStart()},processors:["tailwindcss"],imports:{},types:{},customSettings:{imports:{react:"https://esm.sh/react","react/":"https://esm.sh/react/","react-dom":"https://esm.sh/react-dom","react-dom/":"https://esm.sh/react-dom/","@":`${t}shadcdn.js`,"@/lib/utils":`${t}shadcdn.js`,"@/components/ui/accordion":`${t}shadcdn.js`,"@/components/ui/alert-dialog":`${t}shadcdn.js`,"@/components/ui/alert":`${t}shadcdn.js`,"@/components/ui/aspect-ratio":`${t}shadcdn.js`,"@/components/ui/avatar":`${t}shadcdn.js`,"@/components/ui/badge":`${t}shadcdn.js`,"@/components/ui/button":`${t}shadcdn.js`,"@/components/ui/calendar":`${t}shadcdn.js`,"@/components/ui/card":`${t}shadcdn.js`,"@/components/ui/checkbox":`${t}shadcdn.js`,"@/components/ui/collapsible":`${t}shadcdn.js`,"@/components/ui/command":`${t}shadcdn.js`,"@/components/ui/context-menu":`${t}shadcdn.js`,"@/components/ui/dialog":`${t}shadcdn.js`,"@/components/ui/dropdown-menu":`${t}shadcdn.js`,"@/components/ui/form":`${t}shadcdn.js`,"@/components/ui/hover-card":`${t}shadcdn.js`,"@/components/ui/input":`${t}shadcdn.js`,"@/components/ui/label":`${t}shadcdn.js`,"@/components/ui/menubar":`${t}shadcdn.js`,"@/components/ui/navigation-menu":`${t}shadcdn.js`,"@/components/ui/popover":`${t}shadcdn.js`,"@/components/ui/progress":`${t}shadcdn.js`,"@/components/ui/radio-group":`${t}shadcdn.js`,"@/components/ui/scroll-area":`${t}shadcdn.js`,"@/components/ui/select":`${t}shadcdn.js`,"@/components/ui/separator":`${t}shadcdn.js`,"@/components/ui/sheet":`${t}shadcdn.js`,"@/components/ui/skeleton":`${t}shadcdn.js`,"@/components/ui/slider":`${t}shadcdn.js`,"@/components/ui/switch":`${t}shadcdn.js`,"@/components/ui/table":`${t}shadcdn.js`,"@/components/ui/tabs":`${t}shadcdn.js`,"@/components/ui/textarea":`${t}shadcdn.js`,"@/components/ui/toast":`${t}shadcdn.js`,"@/components/ui/toaster":`${t}shadcdn.js`,"@/components/ui/toggle":`${t}shadcdn.js`,"@/components/ui/tooltip":`${t}shadcdn.js`,"@/components/ui/use-toast":`${t}shadcdn.js`,"@/components/ui/resizable":`${t}shadcdn.js`,"@/components/ui/input-otp":`${t}shadcdn.js`,"@/components/ui/breadcrumb":`${t}shadcdn.js`,"@/components/ui/toggle-group":`${t}shadcdn.js`,"@/components/ui/sonner":`${t}shadcdn.js`,"@/components/ui/pagination":`${t}shadcdn.js`,"@/components/ui/drawer":`${t}shadcdn.js`,"@/components/ui/carousel":`${t}shadcdn.js`,"@/components/ui/sidebar":`${t}shadcdn.js`,"@/components/ui/chart":`${t}shadcdn.js`},types:{"@/components":`${t}shadcdn.d.ts`,"@/utils":`${t}shadcdn.d.ts`}}};var Ct={name:"daisyui",title:getTemplateName("templates.starter.daisyui","daisyUI Starter"),thumbnail:"assets/templates/daisyui.svg",activeEditor:"markup",markup:{language:"html",content:`
+`.trimStart()},processors:["tailwindcss"],imports:{},types:{},customSettings:{imports:{react:"https://esm.sh/react","react/":"https://esm.sh/react/","react-dom":"https://esm.sh/react-dom","react-dom/":"https://esm.sh/react-dom/","@":`${t}shadcdn.js`,"@/lib/utils":`${t}shadcdn.js`,"@/components/ui/accordion":`${t}shadcdn.js`,"@/components/ui/alert-dialog":`${t}shadcdn.js`,"@/components/ui/alert":`${t}shadcdn.js`,"@/components/ui/aspect-ratio":`${t}shadcdn.js`,"@/components/ui/avatar":`${t}shadcdn.js`,"@/components/ui/badge":`${t}shadcdn.js`,"@/components/ui/button":`${t}shadcdn.js`,"@/components/ui/calendar":`${t}shadcdn.js`,"@/components/ui/card":`${t}shadcdn.js`,"@/components/ui/checkbox":`${t}shadcdn.js`,"@/components/ui/collapsible":`${t}shadcdn.js`,"@/components/ui/command":`${t}shadcdn.js`,"@/components/ui/context-menu":`${t}shadcdn.js`,"@/components/ui/dialog":`${t}shadcdn.js`,"@/components/ui/dropdown-menu":`${t}shadcdn.js`,"@/components/ui/form":`${t}shadcdn.js`,"@/components/ui/hover-card":`${t}shadcdn.js`,"@/components/ui/input":`${t}shadcdn.js`,"@/components/ui/label":`${t}shadcdn.js`,"@/components/ui/menubar":`${t}shadcdn.js`,"@/components/ui/navigation-menu":`${t}shadcdn.js`,"@/components/ui/popover":`${t}shadcdn.js`,"@/components/ui/progress":`${t}shadcdn.js`,"@/components/ui/radio-group":`${t}shadcdn.js`,"@/components/ui/scroll-area":`${t}shadcdn.js`,"@/components/ui/select":`${t}shadcdn.js`,"@/components/ui/separator":`${t}shadcdn.js`,"@/components/ui/sheet":`${t}shadcdn.js`,"@/components/ui/skeleton":`${t}shadcdn.js`,"@/components/ui/slider":`${t}shadcdn.js`,"@/components/ui/switch":`${t}shadcdn.js`,"@/components/ui/table":`${t}shadcdn.js`,"@/components/ui/tabs":`${t}shadcdn.js`,"@/components/ui/textarea":`${t}shadcdn.js`,"@/components/ui/toast":`${t}shadcdn.js`,"@/components/ui/toaster":`${t}shadcdn.js`,"@/components/ui/toggle":`${t}shadcdn.js`,"@/components/ui/tooltip":`${t}shadcdn.js`,"@/components/ui/use-toast":`${t}shadcdn.js`,"@/components/ui/resizable":`${t}shadcdn.js`,"@/components/ui/input-otp":`${t}shadcdn.js`,"@/components/ui/breadcrumb":`${t}shadcdn.js`,"@/components/ui/toggle-group":`${t}shadcdn.js`,"@/components/ui/sonner":`${t}shadcdn.js`,"@/components/ui/pagination":`${t}shadcdn.js`,"@/components/ui/drawer":`${t}shadcdn.js`,"@/components/ui/carousel":`${t}shadcdn.js`,"@/components/ui/sidebar":`${t}shadcdn.js`,"@/components/ui/chart":`${t}shadcdn.js`},types:{"@/components":`${t}shadcdn.d.ts`,"@/utils":`${t}shadcdn.d.ts`}}};var Tt={name:"daisyui",title:getTemplateName("templates.starter.daisyui","daisyUI Starter"),thumbnail:"assets/templates/daisyui.svg",activeEditor:"markup",markup:{language:"html",content:`
 <!-- based on https://daisyui.com/tailwindplay/ -->
 
 <!-- buttons -->
@@ -3650,7 +3650,7 @@ function LoginForm({
   --depth: 1;
   --noise: 1;
 }
-`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var Ut={name:"java",title:getTemplateName("templates.starter.java","Java Starter"),thumbnail:"assets/templates/java.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var Ct={name:"java",title:getTemplateName("templates.starter.java","Java Starter"),thumbnail:"assets/templates/java.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/java.svg" />
@@ -3724,7 +3724,7 @@ public class Main {
     System.out.println(count);
   }
 }
-`.trimStart()}};var Et={name:"csharp-wasm",title:"C# (Wasm) Starter",thumbnail:"assets/templates/csharp.svg",activeEditor:"script",markup:{language:"html",content:`
+`.trimStart()}};var Ut={name:"csharp-wasm",title:"C# (Wasm) Starter",thumbnail:"assets/templates/csharp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/csharp.svg" />
@@ -3796,4 +3796,4 @@ class Program
         Console.WriteLine(count);
     }
 }
-`.trimStart()}};var po=[b,it,z,q,L,G,d,U,Y,O,bt,D,j,A,Tt,Ct,v,g,N,F,w,h,S,rt,at,jt,_t,V,y,k,ct,st,nt,M,P,R,$,E,lt,H,ut,x,C,ht,Z,Q,Ut,Et,T,_,gt,mt,pt,K,W,J,dt,kt,tt,B,u,X,I,ft,et,f,ot];export{po as starterTemplates};
+`.trimStart()}};var co=[b,it,z,q,L,G,d,U,Y,O,bt,D,j,A,jt,Tt,v,g,N,F,w,h,S,rt,at,_t,kt,V,y,k,ct,st,nt,M,P,R,$,E,lt,H,ut,x,C,ht,Z,Q,Ct,Ut,T,_,gt,mt,pt,K,W,J,dt,St,tt,B,u,X,I,ft,et,f,ot];export{co as starterTemplates};
diff --git a/package-lock.json b/package-lock.json
index 4ef6f11d9e..74f1dc6bee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,7 +68,7 @@
         "eslint-plugin-jest": "28.11.0",
         "eslint-plugin-jsdoc": "50.6.3",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "gh-pages": "3.2.3",
+        "gh-pages": "6.1.0",
         "globals": "15.15.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
@@ -79,6 +79,7 @@
         "postcss": "8.4.6",
         "postcss-cli": "9.1.0",
         "prettier": "3.2.5",
+        "prettier-plugin-organize-imports": "4.1.0",
         "recursive-fs": "2.1.0",
         "sass": "1.49.7",
         "stylelint": "14.5.0",
@@ -4901,7 +4902,7 @@
     "node_modules/array-uniq": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -5022,13 +5023,10 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.14"
-      }
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true
     },
     "node_modules/async-each": {
       "version": "1.0.3",
@@ -7505,9 +7503,9 @@
       "dev": true
     },
     "node_modules/email-addresses": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
-      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -9525,17 +9523,17 @@
       }
     },
     "node_modules/gh-pages": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
-      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.0.tgz",
+      "integrity": "sha512-MdXigvqN3I66Y+tAZsQJMzpBWQOI1snD6BYuECmP+GEdryYMMOQvzn4AConk/+qNg/XIuQhB1xNGrl3Rmj1iow==",
       "dev": true,
       "dependencies": {
-        "async": "^2.6.1",
-        "commander": "^2.18.0",
-        "email-addresses": "^3.0.1",
+        "async": "^3.2.4",
+        "commander": "^11.0.0",
+        "email-addresses": "^5.0.0",
         "filenamify": "^4.3.0",
         "find-cache-dir": "^3.3.1",
-        "fs-extra": "^8.1.0",
+        "fs-extra": "^11.1.1",
         "globby": "^6.1.0"
       },
       "bin": {
@@ -9549,7 +9547,7 @@
     "node_modules/gh-pages/node_modules/array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
       "dev": true,
       "dependencies": {
         "array-uniq": "^1.0.1"
@@ -9558,24 +9556,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gh-pages/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/gh-pages/node_modules/fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+      "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
       },
       "engines": {
-        "node": ">=6 <7 || >=8"
+        "node": ">=14.14"
       }
     },
     "node_modules/gh-pages/node_modules/globby": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
       "dev": true,
       "dependencies": {
         "array-union": "^1.0.1",
@@ -9588,15 +9595,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/gh-pages/node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gh-pages/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/git-raw-commits": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz",
@@ -15563,7 +15591,7 @@
     "node_modules/pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -15572,7 +15600,7 @@
     "node_modules/pinkie-promise": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
       "dev": true,
       "dependencies": {
         "pinkie": "^2.0.0"
@@ -16050,6 +16078,22 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-organize-imports": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-4.1.0.tgz",
+      "integrity": "sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": ">=2.0",
+        "typescript": ">=2.9",
+        "vue-tsc": "^2.1.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "25.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
@@ -23376,7 +23420,7 @@
     "array-uniq": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
       "dev": true
     },
     "array-unique": {
@@ -23458,13 +23502,10 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.14"
-      }
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true
     },
     "async-each": {
       "version": "1.0.3",
@@ -25360,9 +25401,9 @@
       "dev": true
     },
     "email-addresses": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
-      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
+      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==",
       "dev": true
     },
     "emittery": {
@@ -26869,44 +26910,50 @@
       "dev": true
     },
     "gh-pages": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz",
-      "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.0.tgz",
+      "integrity": "sha512-MdXigvqN3I66Y+tAZsQJMzpBWQOI1snD6BYuECmP+GEdryYMMOQvzn4AConk/+qNg/XIuQhB1xNGrl3Rmj1iow==",
       "dev": true,
       "requires": {
-        "async": "^2.6.1",
-        "commander": "^2.18.0",
-        "email-addresses": "^3.0.1",
+        "async": "^3.2.4",
+        "commander": "^11.0.0",
+        "email-addresses": "^5.0.0",
         "filenamify": "^4.3.0",
         "find-cache-dir": "^3.3.1",
-        "fs-extra": "^8.1.0",
+        "fs-extra": "^11.1.1",
         "globby": "^6.1.0"
       },
       "dependencies": {
         "array-union": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
           "dev": true,
           "requires": {
             "array-uniq": "^1.0.1"
           }
         },
+        "commander": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+          "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+          "dev": true
+        },
         "fs-extra": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "version": "11.3.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+          "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
           "dev": true,
           "requires": {
             "graceful-fs": "^4.2.0",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
           }
         },
         "globby": {
           "version": "6.1.0",
           "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
           "dev": true,
           "requires": {
             "array-union": "^1.0.1",
@@ -26916,10 +26963,26 @@
             "pinkie-promise": "^2.0.0"
           }
         },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "dev": true
+        },
+        "universalify": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+          "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
           "dev": true
         }
       }
@@ -31398,13 +31461,13 @@
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
       "dev": true
     },
     "pinkie-promise": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
       "dev": true,
       "requires": {
         "pinkie": "^2.0.0"
@@ -31716,6 +31779,13 @@
       "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true
     },
+    "prettier-plugin-organize-imports": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-4.1.0.tgz",
+      "integrity": "sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==",
+      "dev": true,
+      "requires": {}
+    },
     "pretty-format": {
       "version": "25.5.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
diff --git a/package.json b/package.json
index f6e32a031e..6f250287d1 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "typedocs:sdk": "typedoc src/sdk/livecodes.ts --out build/typedocs/sdk --exclude **/*.spec.ts --excludeExternals",
     "predeploy": "cross-env DOCS_BASE_URL=\"/livecodes/docs/\" npm run build",
     "predeploy:no-docs": "cross-env DOCS_BASE_URL=null npm run build:app",
-    "deploy": "gh-pages -m \"[ci skip] Updates\" -d build",
+    "deploy": "gh-pages -m \"[ci skip] Updates\" -d build --nojekyll",
     "fix": "run-s fix:*",
     "fix:i18n-export": "npm run i18n-export",
     "fix:prettier": "prettier src --write",
@@ -129,7 +129,7 @@
     "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-jsdoc": "50.6.3",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "gh-pages": "3.2.3",
+    "gh-pages": "6.1.0",
     "globals": "15.15.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -140,6 +140,7 @@
     "postcss": "8.4.6",
     "postcss-cli": "9.1.0",
     "prettier": "3.2.5",
+    "prettier-plugin-organize-imports": "4.1.0",
     "recursive-fs": "2.1.0",
     "sass": "1.49.7",
     "stylelint": "14.5.0",
@@ -154,7 +155,8 @@
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all",
-    "printWidth": 100
+    "printWidth": 100,
+    "plugins": ["prettier-plugin-organize-imports"]
   },
   "jest": {
     "preset": "ts-jest",
diff --git a/playwright.config.ts b/playwright.config.ts
index 01e6a137fd..52fe9b8cb2 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,4 +1,3 @@
- 
 import type { PlaywrightTestConfig } from '@playwright/test';
 import type { Config } from './src/livecodes/models';
 
diff --git a/scripts/build.js b/scripts/build.js
index 98a63f39bf..e62cb9f3db 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -43,8 +43,9 @@ const prepareDir = async () => {
   const fileNames = await getFileNames(outDir + '/livecodes/');
   await Promise.all(fileNames.map(async (f) => fs.promises.unlink(outDir + '/livecodes/' + f)));
   await Promise.all([
-    // add headers in Cloudflare
+    // add headers
     process.env.CF_PAGES ? copyFile('src/_headers', '_headers') : Promise.resolve(),
+    copyFile('src/netlify.toml', 'netlify.toml'),
     copyFile('src/favicon.ico', 'favicon.ico'),
     copyFile('src/404.html', '404.html'),
     copyFile('src/index.html', 'index.html'),
@@ -204,6 +205,7 @@ const iifeBuild = () =>
       'languages/haml/lang-haml-compiler.ts',
       'languages/handlebars/lang-handlebars-compiler.ts',
       'languages/imba/lang-imba-compiler.ts',
+      'languages/jinja/lang-jinja-compiler.ts',
       'languages/julia/lang-julia-script.ts',
       'languages/liquid/lang-liquid-compiler.ts',
       'languages/lua-wasm/lang-lua-wasm-script.ts',
diff --git a/scripts/i18n-import.mjs b/scripts/i18n-import.mjs
index be72469300..e477d98f4d 100644
--- a/scripts/i18n-import.mjs
+++ b/scripts/i18n-import.mjs
@@ -1,10 +1,10 @@
 import { LokaliseApi } from '@lokalise/node-api';
-import path from 'path';
-import fs from 'fs';
 import { execSync } from 'child_process';
-import { sortedJSONify, prettierConfig, autoGeneratedWarning } from './i18n-export.js';
+import fs from 'fs';
+import path from 'path';
 import prettier from 'prettier';
 import { exit } from 'process';
+import { autoGeneratedWarning, prettierConfig, sortedJSONify } from './i18n-export.js';
 
 const outDir = path.resolve('src/livecodes/i18n/locales');
 const tmpDir = path.join(outDir, 'tmp');
@@ -81,7 +81,8 @@ const importFromLokalise = async () => {
     let response;
 
     while (true) {
-      const processInfo = await api.queuedProcesses()
+      const processInfo = await api
+        .queuedProcesses()
         .get(process.process_id, { project_id: fullProjectId });
 
       if (processInfo.status === 'finished') {
diff --git a/scripts/i18n-lokalise-json.mjs b/scripts/i18n-lokalise-json.mjs
index 09ced9fb15..f06dd9c070 100644
--- a/scripts/i18n-lokalise-json.mjs
+++ b/scripts/i18n-lokalise-json.mjs
@@ -1,9 +1,9 @@
 // Generate Lokalise JSON files from TypeScript src files in src/livecodes/i18n/locales/<lang> directory.
 
-import fs from 'fs';
-import path from 'path';
 import babel from '@babel/core';
 import parser from '@babel/parser';
+import fs from 'fs';
+import path from 'path';
 import { autoGeneratedWarning, sortedJSONify } from './i18n-export.js';
 
 const flatten = (obj, prefix = '') =>
@@ -51,8 +51,10 @@ const generateLokaliseJSON = async (lang) => {
     console.error(`Language ${srcDir} does not exist.`);
     return;
   } else if (lang === 'en') {
-    console.warn('This script is not intended to be run for English language.\nPlease use `npm run i18n-export` instead.');
-    return
+    console.warn(
+      'This script is not intended to be run for English language.\nPlease use `npm run i18n-export` instead.',
+    );
+    return;
   }
 
   const files = fs
diff --git a/scripts/i18n.js b/scripts/i18n.js
index 52de82d261..e1f4b6bd33 100644
--- a/scripts/i18n.js
+++ b/scripts/i18n.js
@@ -9,8 +9,8 @@ const i18nDir = path.resolve('src/livecodes/i18n/');
 const srcDir = path.join(i18nDir, 'locales');
 
 /**
- * @param {string} locale 
- * @param {string} ns 
+ * @param {string} locale
+ * @param {string} ns
  * @returns string
  */
 const i18nFile = (locale, ns) => `i18n-${locale}-${ns}.json`;
@@ -19,10 +19,8 @@ const buildI18n = async () => {
   const getFilePaths = async (dir = srcDir) => {
     let i18nFiles = [];
     const locales = (await fs.promises.readdir(dir))
-      .filter((name) =>
-        fs.statSync(path.join(dir, name)).isDirectory(),
-      )
-      .filter((name) => name !== 'tmp');  // Skip tmp directory
+      .filter((name) => fs.statSync(path.join(dir, name)).isDirectory())
+      .filter((name) => name !== 'tmp'); // Skip tmp directory
     await Promise.all(
       locales.map(async (locale) => {
         const localeDir = path.join(dir, locale);
@@ -78,8 +76,8 @@ const buildI18n = async () => {
 };
 
 const buildLocalePathLoader = async () => {
-  const locales = (await fs.promises.readdir(srcDir)).filter((name) =>
-    fs.statSync(path.join(srcDir, name)).isDirectory() && name !== 'tmp'
+  const locales = (await fs.promises.readdir(srcDir)).filter(
+    (name) => fs.statSync(path.join(srcDir, name)).isDirectory() && name !== 'tmp',
   );
   const namespaces = (await fs.promises.readdir(path.join(srcDir, 'en')))
     .filter((name) => name.endsWith('.ts'))
@@ -94,17 +92,20 @@ const buildLocalePathLoader = async () => {
     }
   }
 
-  const loader = await prettier.format(`// ATTENTION: This file is auto-generated. Do not edit manually!
+  const loader = await prettier.format(
+    `// ATTENTION: This file is auto-generated. Do not edit manually!
 
     export const pathLoader = (baseUrl: string) => (lngs: string[], nss: string[]) => {
       const lng = lngs[0];
       const ns = nss[0];
       ${ifStatements}return false;
     };
-  `, {
-    parser: 'typescript',
-    ...prettierConfig,
-  });
+  `,
+    {
+      parser: 'typescript',
+      ...prettierConfig,
+    },
+  );
   await fs.promises.writeFile(path.join(i18nDir, 'locale-paths.ts'), loader, 'utf8');
 };
 
diff --git a/scripts/start-release.mjs b/scripts/start-release.mjs
index 15790c53d5..033fb4a356 100644
--- a/scripts/start-release.mjs
+++ b/scripts/start-release.mjs
@@ -1,8 +1,8 @@
 import { confirm, input, select } from '@inquirer/prompts';
 import conventionalChangelog from 'conventional-changelog';
 
-import fs from 'fs';
 import { execSync } from 'child_process';
+import fs from 'fs';
 import { createRequire } from 'module';
 import prettier from 'prettier';
 
diff --git a/src/livecodes/UI/assets.ts b/src/livecodes/UI/assets.ts
index d34ef5f5f3..07af29552f 100644
--- a/src/livecodes/UI/assets.ts
+++ b/src/livecodes/UI/assets.ts
@@ -1,10 +1,10 @@
+import { iconDelete as deleteIcon } from '../UI/icons';
 import type { DeployResult } from '../deploy';
+import { addAssetScreen, assetsScreen } from '../html';
 import type { Asset, EventsManager, FileType, Modal, Notifications, Screen, User } from '../models';
 import type { GitHubFile } from '../services/github';
 import { generateId, type Storage } from '../storage';
-import { addAssetScreen, assetsScreen } from '../html';
 import { copyToClipboard, isMobile, loadScript } from '../utils/utils';
-import { iconDelete as deleteIcon } from '../UI/icons';
 import { flexSearchUrl } from '../vendors';
 import {
   getAddAssetButton,
diff --git a/src/livecodes/UI/backup.ts b/src/livecodes/UI/backup.ts
index 5314ca7467..b2439c69c0 100644
--- a/src/livecodes/UI/backup.ts
+++ b/src/livecodes/UI/backup.ts
@@ -1,6 +1,6 @@
+import { backupScreen } from '../html';
 import type { EventsManager, Modal, Notifications } from '../models';
 import type { Stores } from '../storage';
-import { backupScreen } from '../html';
 import { base64ToUint8Array, downloadFile, getDate, loadScript } from '../utils/utils';
 import { jsZipUrl } from '../vendors';
 import {
diff --git a/src/livecodes/UI/broadcast.ts b/src/livecodes/UI/broadcast.ts
index 079d7f1ed2..f67da426ed 100644
--- a/src/livecodes/UI/broadcast.ts
+++ b/src/livecodes/UI/broadcast.ts
@@ -1,5 +1,5 @@
-import type { AppData, EventsManager, Modal, Notifications } from '../models';
 import { broadcastScreen } from '../html';
+import type { AppData, EventsManager, Modal, Notifications } from '../models';
 import { broadcastService } from '../services/broadcast';
 import {
   getBroadcastBtn,
diff --git a/src/livecodes/UI/code-to-image.ts b/src/livecodes/UI/code-to-image.ts
index 3a60d7d48f..e96665bcd9 100644
--- a/src/livecodes/UI/code-to-image.ts
+++ b/src/livecodes/UI/code-to-image.ts
@@ -1,3 +1,6 @@
+import { prismThemes } from '../editor/codejar/prism-themes';
+import { fonts } from '../editor/fonts';
+import { codeToImageScreen } from '../html';
 import type {
   CodeEditor,
   CodejarTheme,
@@ -9,9 +12,6 @@ import type {
   Modal,
   Notifications,
 } from '../models';
-import { codeToImageScreen } from '../html';
-import { fonts } from '../editor/fonts';
-import { prismThemes } from '../editor/codejar/prism-themes';
 import {
   colorToRgba,
   copyImage,
diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
index 3b7d521720..5977bf0820 100644
--- a/src/livecodes/UI/command-menu-actions.ts
+++ b/src/livecodes/UI/command-menu-actions.ts
@@ -1,6 +1,6 @@
-import type { Config, INinjaAction, Screen, TemplateName } from '../models';
 import { appLanguages } from '../i18n/app-languages';
 import { languageIsEnabled, languages, processorIsEnabled, processors } from '../languages';
+import type { Config, INinjaAction, Screen, TemplateName } from '../models';
 import { isMac, predefinedValues, stringUnionToArray } from '../utils/utils';
 import * as UI from './selectors';
 
diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index fe719e2ff1..eea8ed6fa1 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -1,15 +1,15 @@
+import { languages } from '../languages/languages';
+import { processors } from '../languages/processors';
+import { languageIsEnabled, processorIsEnabled } from '../languages/utils';
 import type {
-  EditorId,
   Config,
+  EditorId,
+  EventsManager,
   Language,
-  Processor,
   LanguageSpecs,
+  Processor,
   Template,
-  EventsManager,
 } from '../models';
-import { languages } from '../languages/languages';
-import { processors } from '../languages/processors';
-import { languageIsEnabled, processorIsEnabled } from '../languages/utils';
 
 export const createLanguageMenus = (
   config: Config,
@@ -17,7 +17,7 @@ export const createLanguageMenus = (
   eventsManager: EventsManager,
   showLanguageInfo: (languageInfo: HTMLElement) => void,
   loadStarterTemplate: (templateName: Template['name']) => void,
-  importCode: (options: { url: string }) => Promise<boolean>,
+  importCode: (options: { importUrl: string }) => Promise<boolean>,
   registerMenuButton: (menu: HTMLElement, button: HTMLElement) => void,
 ) => {
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
@@ -143,7 +143,7 @@ export const createLanguageMenus = (
                 'click',
                 async (event) => {
                   event.preventDefault();
-                  importCode({ url: codeUrl });
+                  importCode({ importUrl: codeUrl });
                 },
                 false,
               );
diff --git a/src/livecodes/UI/deploy.ts b/src/livecodes/UI/deploy.ts
index d7fc72d651..ebd774f130 100644
--- a/src/livecodes/UI/deploy.ts
+++ b/src/livecodes/UI/deploy.ts
@@ -1,20 +1,20 @@
+import { deploy, deployFile, deployedConfirmation } from '../deploy/deploy';
+import { deployScreen, resultTemplate } from '../html';
 import type {
+  getLanguageCompiler as getLanguageCompilerFn,
+  getLanguageExtension as getLanguageExtensionFn,
+} from '../languages';
+import type {
+  Cache,
   Config,
   ContentConfig,
-  Cache,
+  EventsManager,
   Modal,
   Notifications,
   User,
-  EventsManager,
 } from '../models';
-import type {
-  getLanguageCompiler as getLanguageCompilerFn,
-  getLanguageExtension as getLanguageExtensionFn,
-} from '../languages';
-import { deployScreen, resultTemplate } from '../html';
-import { autoCompleteUrl } from '../vendors';
-import { deploy, deployFile, deployedConfirmation } from '../deploy/deploy';
 import { getUserRepos } from '../services/github';
+import { autoCompleteUrl } from '../vendors';
 import { generateQrCode } from './qrcode';
 import {
   getExistingRepoButton,
diff --git a/src/livecodes/UI/editor-settings.ts b/src/livecodes/UI/editor-settings.ts
index c81723b698..2c07be698b 100644
--- a/src/livecodes/UI/editor-settings.ts
+++ b/src/livecodes/UI/editor-settings.ts
@@ -1,3 +1,12 @@
+import { getEditorConfig, getFormatterConfig } from '../config/config';
+import { defaultConfig } from '../config/default-config';
+import { prismThemes } from '../editor/codejar/prism-themes';
+import { codemirrorThemes } from '../editor/codemirror/codemirror-themes';
+import type { createEditor } from '../editor/create-editor';
+import { fonts, getFontFamily } from '../editor/fonts';
+import { monacoThemes } from '../editor/monaco/monaco-themes';
+import { getEditorTheme } from '../editor/themes';
+import { editorSettingsScreen } from '../html';
 import type {
   Config,
   EditorLibrary,
@@ -7,15 +16,6 @@ import type {
   Modal,
   UserConfig,
 } from '../models';
-import type { createEditor } from '../editor/create-editor';
-import { editorSettingsScreen } from '../html';
-import { getEditorConfig, getFormatterConfig } from '../config/config';
-import { defaultConfig } from '../config/default-config';
-import { fonts, getFontFamily } from '../editor/fonts';
-import { getEditorTheme } from '../editor/themes';
-import { monacoThemes } from '../editor/monaco/monaco-themes';
-import { codemirrorThemes } from '../editor/codemirror/codemirror-themes';
-import { prismThemes } from '../editor/codejar/prism-themes';
 import { preventFocus } from '../utils/utils';
 import { getEditorSettingsFormatLink } from './selectors';
 
diff --git a/src/livecodes/UI/embed-ui.ts b/src/livecodes/UI/embed-ui.ts
index 7f9ccf4f98..d9b27ed713 100644
--- a/src/livecodes/UI/embed-ui.ts
+++ b/src/livecodes/UI/embed-ui.ts
@@ -1,3 +1,5 @@
+import { defaultConfig } from '../config/default-config';
+import { embedScreen } from '../html';
 import type {
   CodeEditor,
   ContentConfig,
@@ -7,10 +9,8 @@ import type {
   Modal,
   Notifications,
 } from '../models';
-import { defaultConfig } from '../config/default-config';
-import { embedScreen } from '../html';
-import { cloneObject, copyToClipboard, encodeHTML, escapeCode, indentCode } from '../utils/utils';
 import { permanentUrlService } from '../services/permanent-url';
+import { cloneObject, copyToClipboard, encodeHTML, escapeCode, indentCode } from '../utils/utils';
 
 export const createEmbedUI = async ({
   config,
diff --git a/src/livecodes/UI/import.ts b/src/livecodes/UI/import.ts
index faf587e624..20a91ec1e2 100644
--- a/src/livecodes/UI/import.ts
+++ b/src/livecodes/UI/import.ts
@@ -1,19 +1,19 @@
+import { defaultConfig } from '../config/default-config';
+import { importScreen } from '../html';
+import { importFromFiles } from '../import/files';
+import { importCode } from '../import/import';
 import type { populateConfig as populateConfigFn } from '../import/utils';
 import type {
   Config,
   ContentConfig,
+  EventsManager,
   Modal,
   Notifications,
-  User,
   Screen,
-  EventsManager,
+  User,
 } from '../models';
 import type { ProjectStorage, StorageItem } from '../storage';
-import { defaultConfig } from '../config/default-config';
-import { importScreen } from '../html';
 import { fetchWithHandler } from '../utils/utils';
-import { importCode } from '../import/import';
-import { importFromFiles } from '../import/files';
 import {
   getBulkImportFileInput,
   getBulkImportJsonUrlButton,
diff --git a/src/livecodes/UI/info.ts b/src/livecodes/UI/info.ts
index d6f1cbe3ac..f16c4870ee 100644
--- a/src/livecodes/UI/info.ts
+++ b/src/livecodes/UI/info.ts
@@ -1,9 +1,9 @@
-import { infoScreen } from '../html';
 import * as UI from '../UI';
-import { loadStylesheet, removeDuplicates } from '../utils/utils';
-import { tagifyBaseUrl } from '../vendors';
+import { infoScreen } from '../html';
 import type { Config, Modal } from '../models';
 import type { ProjectStorage } from '../storage';
+import { loadStylesheet, removeDuplicates } from '../utils/utils';
+import { tagifyBaseUrl } from '../vendors';
 
 export const getTags = (value: string): string[] => {
   try {
diff --git a/src/livecodes/UI/open.ts b/src/livecodes/UI/open.ts
index 11029a8571..539d8085d6 100644
--- a/src/livecodes/UI/open.ts
+++ b/src/livecodes/UI/open.ts
@@ -1,3 +1,4 @@
+import { openScreen } from '../html';
 import type {
   Config,
   ContentConfig,
@@ -8,9 +9,8 @@ import type {
   Notifications,
   Screen,
 } from '../models';
-import type { SavedProject, ProjectStorage } from '../storage';
-import { openScreen } from '../html';
-import { getDate, isMobile, downloadFile, loadScript, loadStylesheet } from '../utils';
+import type { ProjectStorage, SavedProject } from '../storage';
+import { downloadFile, getDate, isMobile, loadScript, loadStylesheet } from '../utils';
 import { flexSearchUrl, tagifyBaseUrl } from '../vendors';
 import { getTags } from './info';
 import { getBulkImportButton, getDeleteAllButton, getExportAllButton } from './selectors';
diff --git a/src/livecodes/UI/resources.ts b/src/livecodes/UI/resources.ts
index 7f9c0fb165..9e604ebe12 100644
--- a/src/livecodes/UI/resources.ts
+++ b/src/livecodes/UI/resources.ts
@@ -1,5 +1,5 @@
-import type { Config, CssPresetId, EventsManager, Modal, PkgInfo } from '../models';
 import { resourcesScreen } from '../html';
+import type { Config, CssPresetId, EventsManager, Modal, PkgInfo } from '../models';
 import { pkgInfoService } from '../services/pkgInfo';
 import { debounce, hideOnClickOutside } from '../utils/utils';
 import { getExternalResourcesCssPresetInputs, getExternalResourcesTextareas } from './selectors';
diff --git a/src/livecodes/UI/snippets.ts b/src/livecodes/UI/snippets.ts
index bee0af0468..5694814f09 100644
--- a/src/livecodes/UI/snippets.ts
+++ b/src/livecodes/UI/snippets.ts
@@ -1,20 +1,20 @@
+import { addSnippetScreen, snippetsScreen } from '../html';
+import { getLanguageTitle, languages } from '../languages';
 import type {
-  Snippet,
+  AppData,
   CodeEditor,
   EditorOptions,
-  Modal,
-  Screen,
+  EventsManager,
   Language,
-  AppData,
+  Modal,
   Notifications,
-  EventsManager,
+  Screen,
+  Snippet,
 } from '../models';
 import { generateId, type Storage } from '../storage';
-import { addSnippetScreen, snippetsScreen } from '../html';
-import { getLanguageTitle, languages } from '../languages';
+import { copy as copyIcon, iconDelete as deleteIcon, edit as editIcon } from '../UI/icons';
 import { copyToClipboard, isMobile, loadScript } from '../utils';
 import { flexSearchUrl } from '../vendors';
-import { edit as editIcon, copy as copyIcon, iconDelete as deleteIcon } from '../UI/icons';
 
 import {
   getAddSnippetButton,
diff --git a/src/livecodes/UI/sync-ui.ts b/src/livecodes/UI/sync-ui.ts
index 2dcc5aceb2..8c854e9ad4 100644
--- a/src/livecodes/UI/sync-ui.ts
+++ b/src/livecodes/UI/sync-ui.ts
@@ -1,7 +1,7 @@
-import type { EventsManager, Modal, Notifications, User, UserData } from '../models';
 import { syncScreen } from '../html';
-import { autoCompleteUrl } from '../vendors';
+import type { EventsManager, Modal, Notifications, User, UserData } from '../models';
 import { getUserRepos } from '../services/github';
+import { autoCompleteUrl } from '../vendors';
 import {
   getExistingRepoAutoSync,
   getExistingRepoForm,
diff --git a/src/livecodes/_modules.ts b/src/livecodes/_modules.ts
index b01d018227..7b329cd6e8 100644
--- a/src/livecodes/_modules.ts
+++ b/src/livecodes/_modules.ts
@@ -8,6 +8,8 @@
  * @module
  */
 
+export * as UI from './UI';
+export * as modal from './UI/modal';
 export * as cache from './cache';
 export * as compiler from './compiler';
 export * as config from './config';
@@ -19,7 +21,6 @@ export * as formatter from './formatter';
 export * as html from './html';
 export * as import from './import';
 export * as languages from './languages';
-export * as modal from './UI/modal';
 export type * as models from './models';
 export * as notifications from './notifications';
 export * as result from './result';
@@ -29,6 +30,5 @@ export * as sync from './sync';
 export * as templates from './templates';
 export * as toolspane from './toolspane';
 export * as types from './types';
-export * as UI from './UI';
 export * as utils from './utils';
 export * as vendors from './vendors';
diff --git a/src/livecodes/cache/utils.ts b/src/livecodes/cache/utils.ts
index 26ddd94632..075996ac17 100644
--- a/src/livecodes/cache/utils.ts
+++ b/src/livecodes/cache/utils.ts
@@ -1,4 +1,4 @@
-import type { ContentConfig, Cache, EditorCache } from '../models';
+import type { Cache, ContentConfig, EditorCache } from '../models';
 
 const removeExtra = <T>(editor: T, keys: Array<keyof T>) => {
   const contentEditor = { ...editor };
diff --git a/src/livecodes/compiler/compile-blocks.ts b/src/livecodes/compiler/compile-blocks.ts
index 1bd93b2ce7..c10ffaac0b 100644
--- a/src/livecodes/compiler/compile-blocks.ts
+++ b/src/livecodes/compiler/compile-blocks.ts
@@ -1,4 +1,3 @@
-import type { CompileInfo, Config } from '../models';
 import {
   getLanguageByAlias,
   getLanguageEditorId,
@@ -6,12 +5,13 @@ import {
   processorIsEnabled,
   processors,
 } from '../languages';
+import type { CompileInfo, Config } from '../models';
 import { modulesService } from '../services/modules';
 import { getFileExtension } from '../utils/utils';
 import { compileInCompiler } from './compile-in-compiler';
 import { hasStyleImports } from './import-map';
-import { getCompileResult } from './utils';
 import type { LanguageOrProcessor } from './models';
+import { getCompileResult } from './utils';
 
 interface CompileBlocksOptions {
   removeEnclosingTemplate?: boolean;
diff --git a/src/livecodes/compiler/compile-in-compiler.ts b/src/livecodes/compiler/compile-in-compiler.ts
index c36ba0e7ff..d7169c726c 100644
--- a/src/livecodes/compiler/compile-in-compiler.ts
+++ b/src/livecodes/compiler/compile-in-compiler.ts
@@ -1,4 +1,4 @@
-import type { Config, CompileOptions, CompileResult } from '../models';
+import type { CompileOptions, CompileResult, Config } from '../models';
 import type { LanguageOrProcessor } from './models';
 import { getCompileResult } from './utils';
 
diff --git a/src/livecodes/compiler/compile.page.ts b/src/livecodes/compiler/compile.page.ts
index c979126411..fcc3a20b94 100644
--- a/src/livecodes/compiler/compile.page.ts
+++ b/src/livecodes/compiler/compile.page.ts
@@ -1,7 +1,7 @@
-import { runOutsideWorker as rescript } from '../languages/rescript';
-import { runOutsideWorker as mdx } from '../languages/mdx';
 import { runOutsideWorker as diagrams } from '../languages/diagrams';
+import { runOutsideWorker as mdx } from '../languages/mdx';
 import { runOutsideWorker as postgresql } from '../languages/postgresql';
+import { runOutsideWorker as rescript } from '../languages/rescript';
 
 (window as any).compilers = {
   rescript,
diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index c66082e6a4..7a8f82d1c4 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -1,11 +1,11 @@
 import type TS from 'typescript';
-import type { Compilers, Config, CompileOptions, EditorLibrary, Language } from '../models';
+import { getCompilerOptions } from '../editor/ts-compiler-options';
 import { languages, processors } from '../languages';
-import { codeMirrorBaseUrl, comlinkBaseUrl, vendorsBaseUrl } from '../vendors';
+import type { CompileOptions, Compilers, Config, EditorLibrary, Language } from '../models';
 import { doOnce, objectFilter } from '../utils/utils';
-import { getCompilerOptions } from '../editor/ts-compiler-options';
-import type { LanguageOrProcessor, CompilerMessage, CompilerMessageEvent } from './models';
+import { codeMirrorBaseUrl, comlinkBaseUrl, vendorsBaseUrl } from '../vendors';
 import { getAllCompilers } from './get-all-compilers';
+import type { CompilerMessage, CompilerMessageEvent, LanguageOrProcessor } from './models';
 declare const importScripts: (...args: string[]) => void;
 
 const typescriptAtaUrl = vendorsBaseUrl + 'typescript-ata/typescript-ata.js';
diff --git a/src/livecodes/compiler/create-compiler.ts b/src/livecodes/compiler/create-compiler.ts
index e14000aa18..5fece95d87 100644
--- a/src/livecodes/compiler/create-compiler.ts
+++ b/src/livecodes/compiler/create-compiler.ts
@@ -1,20 +1,20 @@
 import {
   getActivatedProcessors,
-  getLanguageEditorId,
   getCustomSettings,
+  getLanguageEditorId,
   languages,
   processorIsActivated,
   processorIsEnabled,
   processors,
 } from '../languages';
 import type {
-  Language,
-  Config,
-  Compilers,
-  CompilerFunction,
+  CompileInfo,
   CompileOptions,
   CompileResult,
-  CompileInfo,
+  CompilerFunction,
+  Compilers,
+  Config,
+  Language,
 } from '../models';
 import { getAppCDN, sandboxService } from '../services';
 import { getRandomString, stringify } from '../utils';
@@ -22,10 +22,10 @@ import { createCompilerSandbox } from './compiler-sandbox';
 import { getAllCompilers } from './get-all-compilers';
 import { hasStyleImports } from './import-map';
 import type {
-  LanguageOrProcessor,
+  Compiler,
   CompilerMessage,
   CompilerMessageEvent,
-  Compiler,
+  LanguageOrProcessor,
   TypescriptFeatures,
 } from './models';
 import { getCompileResult } from './utils';
diff --git a/src/livecodes/compiler/get-all-compilers.ts b/src/livecodes/compiler/get-all-compilers.ts
index 09d05ac3a3..f704e6ea6a 100644
--- a/src/livecodes/compiler/get-all-compilers.ts
+++ b/src/livecodes/compiler/get-all-compilers.ts
@@ -1,10 +1,10 @@
 import { languageIsEnabled, processors } from '../languages';
 import type {
-  Language,
-  LanguageSpecs,
-  Config,
   Compiler,
   Compilers,
+  Config,
+  Language,
+  LanguageSpecs,
   ProcessorSpecs,
 } from '../models';
 import { isRelativeUrl } from '../utils';
diff --git a/src/livecodes/compiler/get-compiler.ts b/src/livecodes/compiler/get-compiler.ts
index f45a0a6061..f1846d2129 100644
--- a/src/livecodes/compiler/get-compiler.ts
+++ b/src/livecodes/compiler/get-compiler.ts
@@ -1,4 +1,4 @@
-import type { Language, Config, EventsManager } from '../models';
+import type { Config, EventsManager, Language } from '../models';
 import { createCompiler } from './create-compiler';
 import type { Compiler, LanguageOrProcessor } from './models';
 import { getCompileResult } from './utils';
diff --git a/src/livecodes/compiler/models.ts b/src/livecodes/compiler/models.ts
index 7965ab1dce..44d58cb06d 100644
--- a/src/livecodes/compiler/models.ts
+++ b/src/livecodes/compiler/models.ts
@@ -1,4 +1,4 @@
-import type { Language, Config, Processor, CompileOptions, CompileResult } from '../models';
+import type { CompileOptions, CompileResult, Config, Language, Processor } from '../models';
 
 export interface Compiler {
   load: (languages: LanguageOrProcessor[], config: Config) => Promise<unknown[]>;
diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index b0888a4ea4..6fabcfe775 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -1,21 +1,33 @@
+import { getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type {
+  Config,
   EditorId,
   Language,
-  Config,
+  Processor,
   Tool,
   ToolsPaneStatus,
   UrlQueryParams,
-  Processor,
 } from '../models';
-import { getLanguageByAlias, getLanguageEditorId } from '../languages';
 import { cloneObject, decodeHTML, removeDuplicates } from '../utils';
 import { decompress } from '../utils/compression';
 import { defaultConfig } from './default-config';
-import { upgradeAndValidate } from '.';
-
-export const buildConfig = (appConfig: Partial<Config>) => {
+import { upgradeAndValidate } from './index';
+
+/**
+ * Builds and validates a configuration object by merging default config with user config and URL params
+ *
+ * @param appConfig - Partial configuration object provided by user
+ * @returns Complete validated configuration object
+ *
+ * The function:
+ * 1. Merges default config with user provided config
+ * 2. Handles special case for 'result' mode tools
+ * 3. Processes URL query parameters
+ * 4. Sets active editor
+ * 5. Fixes language names in final config
+ */
+export const buildConfig = (appConfig: Partial<Config>): Config => {
   if (!appConfig) return { ...defaultConfig };
-
   const userConfig = upgradeAndValidate(appConfig);
 
   let config: Config = {
@@ -35,14 +47,12 @@ export const buildConfig = (appConfig: Partial<Config>) => {
     ...config,
     ...paramsConfig,
   };
-
   const activeEditor = config.activeEditor || 'markup';
 
   config = fixLanguageNames({
     ...config,
     activeEditor,
   });
-
   return config;
 };
 
@@ -80,10 +90,38 @@ const fixLanguageNames = (config: Config): Config => ({
     : {}),
 });
 
-export const getParams = (queryParams = parent.location.search): UrlQueryParams => {
+/**
+ * Extracts and processes URL query parameters and hash parameters, converting them into a structured object
+ *
+ * @param queryParams - The URL search query string. Defaults to parent.location.search
+ * @param hashParams - The URL hash string. Defaults to parent.location.hash
+ * @returns {UrlQueryParams} An object containing processed URL parameters where:
+ *
+ * - Values 'true' and 'false' are converted to boolean
+ * - Empty string values are converted to true
+ * - URL encoded values are decoded
+ * - Special 'params' key content is decompressed and parsed as JSON
+ * - Hash parameters take precedence over query parameters with the same key
+ *
+ * @example
+ * // For URL: http://example.com?foo=bar&empty=&isTrue=true#param=value
+ * getParams() // Returns: { foo: "bar", empty: true, isTrue: true, param: "value" }
+ */
+export const getParams = (
+  queryParams = parent.location.search,
+  hashParams = parent.location.hash,
+): UrlQueryParams => {
   let params: { [key: string]: string | boolean } = Object.fromEntries(
     new URLSearchParams(queryParams),
   );
+  if (hashParams) {
+    // overwrite params with hash params if they exist
+    hashParams = hashParams.replace('#', '?');
+    params = {
+      ...params,
+      ...Object.fromEntries(new URLSearchParams(hashParams)),
+    };
+  }
   let encodedParams = {};
   Object.keys(params).forEach((key) => {
     try {
@@ -102,6 +140,7 @@ export const getParams = (queryParams = parent.location.search): UrlQueryParams
     if (params[key] === 'true') params[key] = true;
     if (params[key] === 'false') params[key] = false;
   });
+  params.x ??= params.import;
   return params;
 };
 
@@ -127,7 +166,6 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
       }),
       {} as Partial<Config>,
     );
-
   // populate params config from query string params
 
   // ?html=hi&scss&ts
@@ -137,7 +175,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
     const editorId = getLanguageEditorId(language);
     if (editorId && !paramsConfig[editorId]) {
       const value = params[key];
-      const content = typeof value === 'string' ? decodeHTML(decodeURIComponent(value)) : '';
+      const content = typeof value === 'string' ? decodeHTML(value) : '';
       paramsConfig[editorId] = { language, content };
       if (!paramsConfig.activeEditor) {
         paramsConfig.activeEditor = editorId;
@@ -314,6 +352,5 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
   if (params.lite) {
     paramsConfig.mode = 'lite';
   }
-
   return paramsConfig;
 };
diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
index 9ca139cafe..5f4b765533 100644
--- a/src/livecodes/config/config.ts
+++ b/src/livecodes/config/config.ts
@@ -1,10 +1,10 @@
 import type {
-  ContentConfig,
+  AppConfig,
   Config,
-  UserConfig,
+  ContentConfig,
   EditorConfig,
   FormatterConfig,
-  AppConfig,
+  UserConfig,
 } from '../models';
 import { cloneObject } from '../utils';
 import { defaultConfig } from './default-config';
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index ce043f5edd..88eebbdf79 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -1,5 +1,5 @@
 import { getLanguageByAlias, getLanguageEditorId } from '../languages';
-import type { Editor, Config, ToolsPaneStatus, EditorId, Tool, Language } from '../models';
+import type { Config, Editor, EditorId, Language, Tool, ToolsPaneStatus } from '../models';
 import { removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
 
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index c928f36e23..c52cd311f8 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1,127 +1,158 @@
-import { createEditor, createCustomEditors, getFontFamily } from './editor';
+import { getPlaygroundUrl } from '../sdk';
 import {
-  languages,
-  getLanguageEditorId,
+  createLoginContainer,
+  createOpenItem,
+  createProjectInfoUI,
+  createSplitPanes,
+  createStarterTemplateLink,
+  createTemplatesContainer,
+  displayLoggedIn,
+  displayLoggedOut,
+  getFullscreenButton,
+  getResultElement,
+  loadingMessage,
+  noUserTemplates,
+} from './UI';
+import type {
+  BroadcastData,
+  BroadcastInfo,
+  BroadcastResponseData,
+  BroadcastResponseError,
+} from './UI/broadcast';
+import { getCommandMenuActions } from './UI/command-menu-actions';
+import { createLanguageMenus, createProcessorItem } from './UI/create-language-menus';
+import { createModal } from './UI/modal';
+import * as UI from './UI/selectors';
+import { themeColors } from './UI/theme-colors';
+import { cacheIsValid, getCache, getCachedCode, setCache, updateCache } from './cache';
+import { cjs2esm, getAllCompilers, getCompileResult, getCompiler } from './compiler';
+import {
+  buildConfig,
+  defaultConfig,
+  getConfig,
+  getContentConfig,
+  getEditorConfig,
+  getFormatterConfig,
+  getParams,
+  getUserConfig,
+  setConfig,
+  upgradeAndValidate,
+} from './config';
+import { createCustomEditors, createEditor, getFontFamily } from './editor';
+import { hasJsx } from './editor/ts-compiler-options';
+import { createEventsManager, createPub } from './events';
+import { customEvents } from './events/custom-events';
+import { exportJSON } from './export/export-json';
+import { getFormatter } from './formatter';
+import type { Formatter } from './formatter/models';
+import {
+  aboutScreen,
+  customSettingsScreen,
+  keyboardShortcutsScreen,
+  menuHelpHTML,
+  menuProjectHTML,
+  menuSettingsHTML,
+  recoverPromptScreen,
+  resultPopupHTML,
+  resultTemplate,
+  savePromptScreen,
+  testEditorScreen,
+  welcomeScreen,
+} from './html';
+import type {
+  I18nInterpolationType,
+  I18nKeyType,
+  I18nTranslationTemplate,
+  I18nValueType,
+} from './i18n';
+import { appLanguages } from './i18n/app-languages';
+import { isGithub } from './import/check-src';
+import { importCompressedCode } from './import/code';
+import { importFromFiles } from './import/files';
+import { populateConfig } from './import/utils';
+import {
+  getLanguageByAlias,
   getLanguageCompiler,
+  getLanguageEditorId,
+  getLanguageExtension,
+  getLanguageSpecs,
+  getLanguageTitle,
   languageIsEnabled,
-  processors,
-  processorIsEnabled,
-  getLanguageByAlias,
+  languages,
   mapLanguage,
-  getLanguageTitle,
-  getLanguageSpecs,
-  getLanguageExtension,
+  processorIsEnabled,
+  processors,
 } from './languages';
-import {
-  fakeStorage,
-  createStores,
-  initializeStores,
-  type Stores,
-  type StorageItem,
-} from './storage';
-
 import type {
   API,
+  APICommands,
+  AppData,
+  AppLanguage,
+  Await,
+  BlocklyContent,
   Cache,
+  Code,
   CodeEditor,
+  CompileInfo,
+  Config,
+  ContentConfig,
+  CustomEditors,
+  CustomSettings,
+  Editor,
   EditorId,
   EditorLanguages,
   EditorOptions,
   Editors,
+  EventsManager,
   GithubScope,
   Language,
-  Config,
+  Modal,
+  Notifications,
+  Processor,
+  SDKEvent,
   Screen,
   ShareData,
   Template,
-  User,
-  ContentConfig,
-  Theme,
-  UserConfig,
-  Await,
-  Code,
-  CustomEditors,
-  BlocklyContent,
-  CustomSettings,
-  Types,
   TestResult,
+  Theme,
   ToolsPane,
+  Types,
+  User,
+  UserConfig,
   UserData,
-  AppData,
-  Processor,
-  APICommands,
-  CompileInfo,
-  SDKEvent,
-  Editor,
-  AppLanguage,
-  Modal,
-  Notifications,
-  EventsManager,
 } from './models';
-import type { GitHubFile } from './services/github';
-import type {
-  BroadcastData,
-  BroadcastInfo,
-  BroadcastResponseData,
-  BroadcastResponseError,
-} from './UI/broadcast';
-import type { Formatter } from './formatter/models';
-import { getFormatter } from './formatter';
 import { createNotifications } from './notifications';
-import { createModal } from './UI/modal';
+import { cleanResultFromDev, createResultPage } from './result';
+import { createAuthService, getAppCDN, sandboxService, shareService } from './services';
+import type { GitHubFile } from './services/github';
+import { permanentUrlService } from './services/permanent-url';
 import {
-  menuProjectHTML,
-  menuSettingsHTML,
-  menuHelpHTML,
-  resultTemplate,
-  customSettingsScreen,
-  testEditorScreen,
-  savePromptScreen,
-  recoverPromptScreen,
-  resultPopupHTML,
-  welcomeScreen,
-  aboutScreen,
-  keyboardShortcutsScreen,
-} from './html';
-import { exportJSON } from './export/export-json';
-import { createEventsManager, createPub } from './events';
+  createStores,
+  fakeStorage,
+  initializeStores,
+  type StorageItem,
+  type Stores,
+} from './storage';
 import { getStarterTemplates, getTemplate } from './templates';
+import { createToolsPane } from './toolspane';
+import { createTypeLoader, getDefaultTypes } from './types';
 import {
-  buildConfig,
-  defaultConfig,
-  getConfig,
-  getContentConfig,
-  getEditorConfig,
-  getFormatterConfig,
-  getParams,
-  getUserConfig,
-  setConfig,
-  upgradeAndValidate,
-} from './config';
-import { isGithub } from './import/check-src';
-import {
+  capitalize,
+  colorToHex,
   colorToHsla,
+  compareObjects,
   copyToClipboard,
+  ctrl,
   debounce,
   getValidUrl,
+  isMac,
   loadStylesheet,
+  predefinedValues,
   safeName,
-  stringify,
   stringToValidJson,
+  stringify,
   toDataUrl,
-  predefinedValues,
-  colorToHex,
-  capitalize,
-  isMac,
-  ctrl,
 } from './utils';
-import { compress } from './utils/compression';
-import { getCompiler, getAllCompilers, cjs2esm, getCompileResult } from './compiler';
-import { createTypeLoader, getDefaultTypes } from './types';
-import { cleanResultFromDev, createResultPage } from './result';
-import * as UI from './UI/selectors';
-import { createAuthService, getAppCDN, sandboxService, shareService } from './services';
-import { cacheIsValid, getCache, getCachedCode, setCache, updateCache } from './cache';
 import {
   fontInterUrl,
   fontMaterialIconsUrl,
@@ -134,36 +165,6 @@ import {
   ninjaKeysUrl,
   snackbarUrl,
 } from './vendors';
-import { createToolsPane } from './toolspane';
-import {
-  createOpenItem,
-  createProjectInfoUI,
-  createSplitPanes,
-  createStarterTemplateLink,
-  displayLoggedIn,
-  displayLoggedOut,
-  getResultElement,
-  loadingMessage,
-  noUserTemplates,
-  createLoginContainer,
-  createTemplatesContainer,
-  getFullscreenButton,
-} from './UI';
-import { customEvents } from './events/custom-events';
-import { populateConfig } from './import/utils';
-import { permanentUrlService } from './services/permanent-url';
-import { importFromFiles } from './import/files';
-import type {
-  I18nKeyType,
-  I18nValueType,
-  I18nInterpolationType,
-  I18nTranslationTemplate,
-} from './i18n';
-import { appLanguages } from './i18n/app-languages';
-import { themeColors } from './UI/theme-colors';
-import { getCommandMenuActions } from './UI/command-menu-actions';
-import { createLanguageMenus, createProcessorItem } from './UI/create-language-menus';
-import { hasJsx } from './editor/ts-compiler-options';
 
 // declare global dependencies
 declare global {
@@ -196,6 +197,7 @@ let typeLoader: ReturnType<typeof createTypeLoader>;
 const screens: Screen[] = [];
 const params = getParams(); // query string params
 const iframeScrollPosition = { x: 0, y: 0 };
+const editorIds: EditorId[] = ['markup', 'style', 'script'];
 
 let baseUrl: string;
 let isEmbed: boolean;
@@ -403,7 +405,6 @@ const highlightSelectedLanguage = (editorId: EditorId, language: Language) => {
 };
 
 const setEditorTitle = (editorId: EditorId, title: string) => {
-  const editorIds: EditorId[] = ['markup', 'style', 'script'];
   const editorTitle = document.querySelector(`#${editorId}-selector span`) as HTMLElement;
   const editorTitleContainer = document.querySelector(`#${editorId}-selector`) as HTMLElement;
   const language = getLanguageByAlias(title);
@@ -433,7 +434,6 @@ const setEditorTitle = (editorId: EditorId, title: string) => {
 };
 
 const createCopyButtons = () => {
-  const editorIds: EditorId[] = ['markup', 'style', 'script'];
   const copyImgHtml = `<span><i class="icon-copy" alt="copy"></i></span>`;
   editorIds.forEach((editorId) => {
     const copyButton = document.createElement('div');
@@ -687,7 +687,6 @@ const showMode = (mode?: Config['mode'], view?: Config['view']) => {
 
 const showEditor = (editorId: EditorId = 'markup', isUpdate = false) => {
   const config = getConfig();
-  const editorIds: EditorId[] = ['markup', 'style', 'script'];
   const allHidden = editorIds.every((editor) => config[editor].hideTitle);
   if (config[editorId].hideTitle && !allHidden) return;
   const titles = UI.getEditorTitles();
@@ -1318,34 +1317,35 @@ const share = async (
         },
       }
     : config;
-  const contentParam = shortUrl
-    ? '?x=id/' +
+
+  const currentUrl = (location.origin + location.pathname).split('/').slice(0, -1).join('/') + '/';
+  const appUrl = permanentUrl ? permanentUrlService.getAppUrl() : currentUrl;
+  let shareURL = new URL(appUrl);
+  if (shortUrl) {
+    shareURL.search =
+      'x=id/' +
       (await shareService.shareProject({
         ...content,
         result: includeResult ? getCache().result : undefined,
-      }))
-    : '?x=code/' + compress(JSON.stringify(content));
-
-  const currentUrl = (location.origin + location.pathname).split('/').slice(0, -1).join('/') + '/';
-
-  const url = permanentUrl ? permanentUrlService.getAppUrl() : currentUrl;
-
-  const shareURL = url + contentParam;
+      }));
+  } else {
+    const playgroundUrl = getPlaygroundUrl({ appUrl, config: content });
+    shareURL = new URL(playgroundUrl);
+  }
 
   if (urlUpdate) {
-    updateUrl(currentUrl + contentParam, true);
+    updateUrl(shareURL.href, true);
   }
 
   const projectTitle = content.title !== defaultConfig.title ? content.title + ' - ' : '';
 
   return {
     title: projectTitle + 'LiveCodes',
-    url: shareURL,
+    url: shareURL.href,
   };
 };
 
 const updateConfig = () => {
-  const editorIds: EditorId[] = ['markup', 'style', 'script'];
   editorIds.forEach((editorId) => {
     setConfig({
       ...getConfig(),
@@ -1397,39 +1397,96 @@ const loadConfig = async (
   iframeScrollPosition.x = 0;
   iframeScrollPosition.y = 0;
 
-  // load config
-  await bootstrap(true);
-  await applyConfig(config);
+  await applyConfig(config, /* reload= */ true);
 
   changingContent = false;
 };
 
-const applyConfig = async (newConfig: Partial<Config>) => {
+const applyConfig = async (newConfig: Partial<Config>, reload = false) => {
   const currentConfig = getConfig();
+  const combinedConfig: Config = { ...currentConfig, ...newConfig };
+  if (reload) {
+    await updateEditors(editors, getConfig());
+  }
+  phpHelper({ editor: editors.script });
+  setLoading(true);
+  await setActiveEditor(combinedConfig);
+
   if (!isEmbed) {
-    loadSettings(currentConfig);
+    loadSettings(combinedConfig);
   }
   if (newConfig.mode || newConfig.view) {
-    window.deps?.showMode?.(
-      newConfig.mode ?? currentConfig.mode,
-      newConfig.view ?? currentConfig.view,
-    );
+    window.deps?.showMode?.(combinedConfig.mode, combinedConfig.view);
   }
   if (newConfig.tools) {
-    configureToolsPane(newConfig.tools, newConfig.mode);
+    configureToolsPane(newConfig.tools, combinedConfig.mode);
   }
   if (newConfig.zoom) {
     zoom(newConfig.zoom);
   }
   if (newConfig.theme || newConfig.editorTheme || newConfig.themeColor || newConfig.fontSize) {
-    setTheme(
-      newConfig.theme || currentConfig.theme,
-      newConfig.editorTheme || currentConfig.editorTheme,
-    );
+    setTheme(combinedConfig.theme, combinedConfig.editorTheme);
   }
   if (newConfig.autotest) {
     UI.getWatchTestsButton()?.classList.remove('disabled');
   }
+  toolsPane?.console?.clear(/* silent= */ true);
+
+  setConfig(combinedConfig);
+
+  if (!isEmbed) {
+    setTimeout(() => getActiveEditor().focus());
+  }
+  setExternalResourcesMark();
+  setCustomSettingsMark();
+  updateCompiledCode();
+  loadModuleTypes(editors, combinedConfig, /* loadAll = */ true);
+  compiler.load(getEditorLanguages(), combinedConfig).then(() => {
+    if (!combinedConfig.autoupdate) {
+      setLoading(false);
+      return;
+    }
+    setTimeout(() => {
+      if (
+        toolsPane?.getActiveTool() === 'tests' &&
+        ['open', 'full'].includes(toolsPane?.getStatus())
+      ) {
+        run(undefined, true);
+      } else {
+        run();
+      }
+    });
+  });
+  if (!isEmbed) {
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(
+        () => {
+          formatter.load(getEditorLanguages());
+        },
+        { timeout: 15_000 },
+      );
+    } else {
+      setTimeout(() => {
+        formatter.load(getEditorLanguages());
+      }, 10_000);
+    }
+  }
+  if (isEmbed && !combinedConfig.tests?.content?.trim()) {
+    toolsPane?.disableTool('tests');
+  } else {
+    toolsPane?.enableTool('tests');
+  }
+
+  if (!reload) {
+    await loadDefaults();
+
+    // re-run changing theme color after the UI is ready
+    // in case the previous one failed (e.g. in firefox)
+    requestAnimationFrame(() => {
+      changeThemeColor();
+    });
+  }
+
   let shouldReloadEditors = false;
   const editorConfig = {
     ...getEditorConfig(newConfig as Config),
@@ -1461,8 +1518,10 @@ const applyConfig = async (newConfig: Partial<Config>) => {
     }
   }
   if (shouldReloadEditors) {
-    await reloadEditors({ ...currentConfig, ...newConfig });
+    await reloadEditors(combinedConfig);
   }
+
+  parent.dispatchEvent(new Event(customEvents.ready));
 };
 
 const setUserConfig = (newConfig: Partial<UserConfig> | null, save = true) => {
@@ -5179,26 +5238,31 @@ const configureModes = ({
 
 const importExternalContent = async (options: {
   config?: Config;
+  sdkConfig?: Partial<Config>;
   configUrl?: string;
   template?: string;
-  url?: string;
+  importUrl?: string;
 }): Promise<boolean> => {
-  const { config = defaultConfig, configUrl, template, url } = options;
-  const editorIds: EditorId[] = ['markup', 'style', 'script'];
+  const { config = defaultConfig, sdkConfig, configUrl, template } = options;
+  let importUrl = options.importUrl;
   const hasContentUrls = (conf: Partial<Config>) =>
     editorIds.filter(
       (editorId) =>
         (conf[editorId]?.contentUrl && !conf[editorId]?.content) ||
         (conf[editorId]?.hiddenContentUrl && !conf[editorId]?.hiddenContent),
     ).length > 0;
+  const validConfigUrl = getValidUrl(configUrl);
+  if (importUrl?.startsWith('config') || importUrl?.startsWith('params')) {
+    importUrl = ''; // ignore hash params
+  }
 
-  if (!configUrl && !template && !url && !hasContentUrls(config)) return false;
+  if (!validConfigUrl && !template && !importUrl && !hasContentUrls(config)) return false;
 
   const loadingMessage = window.deps.translateString('core.import.loading', 'Loading Project...');
   notifications.info(loadingMessage);
 
   let templateConfig: Partial<Config> = {};
-  let urlConfig: Partial<Config> = {};
+  let importUrlConfig: Partial<Config> = {};
   let contentUrlConfig: Partial<Config> = {};
   let configUrlConfig: Partial<Config> = {};
 
@@ -5218,27 +5282,26 @@ const importExternalContent = async (options: {
       );
     }
   }
-
-  if (url) {
-    let validUrl = url;
-    if (url.startsWith('http') || url.startsWith('data')) {
+  if (importUrl) {
+    let validImportUrl = importUrl;
+    if (importUrl.startsWith('http') || importUrl.startsWith('data')) {
       try {
-        validUrl = new URL(url).href;
+        validImportUrl = new URL(importUrl).href;
       } catch {
-        validUrl = decodeURIComponent(url);
+        validImportUrl = decodeURIComponent(importUrl);
       }
     }
-    // import code from hash: code / github / github gist / url html / ...etc
+    // import code from hash: github / github gist / url html / ...etc
     let user;
-    if (isGithub(validUrl) && !isEmbed) {
+    if (isGithub(validImportUrl) && !isEmbed) {
       await initializeAuth();
       user = await authService?.getUser();
     }
 
     const importModule: typeof import('./UI/import') = await import(baseUrl + '{{hash:import.js}}');
-    urlConfig = await importModule.importCode(validUrl, getParams(), getConfig(), user, baseUrl);
+    importUrlConfig = await importModule.importCode(validImportUrl, params, config, user, baseUrl);
 
-    if (Object.keys(urlConfig).length === 0) {
+    if (Object.keys(importUrlConfig).length === 0) {
       notifications.error(
         window.deps.translateString('core.error.invalidImport', 'Invalid import URL'),
       );
@@ -5273,7 +5336,6 @@ const importExternalContent = async (options: {
     };
   }
 
-  const validConfigUrl = getValidUrl(configUrl);
   if (validConfigUrl) {
     configUrlConfig = upgradeAndValidate(
       await fetch(validConfigUrl)
@@ -5281,7 +5343,7 @@ const importExternalContent = async (options: {
         .catch(() => ({})),
     );
     if (hasContentUrls(configUrlConfig)) {
-      return importExternalContent({ config: { ...config, ...configUrlConfig } });
+      return importExternalContent({ ...options, config: { ...config, ...configUrlConfig } });
     }
   }
 
@@ -5289,9 +5351,10 @@ const importExternalContent = async (options: {
     buildConfig({
       ...config,
       ...templateConfig,
-      ...urlConfig,
-      ...contentUrlConfig,
+      ...importUrlConfig,
       ...configUrlConfig,
+      ...sdkConfig,
+      ...contentUrlConfig,
     }),
     parent.location.href,
     false,
@@ -5347,75 +5410,6 @@ const loadDefaults = async () => {
   setProjectRecover(/* reset = */ true);
 };
 
-const bootstrap = async (reload = false) => {
-  if (reload) {
-    await updateEditors(editors, getConfig());
-  }
-  phpHelper({ editor: editors.script });
-  setLoading(true);
-  window.deps?.showMode?.(getConfig().mode, getConfig().view);
-  zoom(getConfig().zoom);
-  await setActiveEditor(getConfig());
-  loadSettings(getConfig());
-  // TODO: Fix
-  toolsPane?.console?.clear(/* silent= */ true);
-  if (!isEmbed) {
-    setTimeout(() => getActiveEditor().focus());
-  }
-  setExternalResourcesMark();
-  setCustomSettingsMark();
-  updateCompiledCode();
-  loadModuleTypes(editors, getConfig(), /* loadAll = */ true);
-  compiler.load(Object.values(editorLanguages || {}), getConfig()).then(() => {
-    if (!getConfig().autoupdate) {
-      setLoading(false);
-      return;
-    }
-    setTimeout(() => {
-      if (
-        toolsPane?.getActiveTool() === 'tests' &&
-        ['open', 'full'].includes(toolsPane?.getStatus())
-      ) {
-        run(undefined, true);
-      } else {
-        run();
-      }
-    });
-  });
-  if (!isEmbed) {
-    // @ts-ignore
-    if (window.requestIdleCallback) {
-      requestIdleCallback(
-        () => {
-          formatter.load(getEditorLanguages());
-        },
-        { timeout: 15_000 },
-      );
-    } else {
-      setTimeout(() => {
-        formatter.load(getEditorLanguages());
-      }, 10_000);
-    }
-  }
-  if (isEmbed && !getConfig().tests?.content?.trim()) {
-    toolsPane?.disableTool('tests');
-  } else {
-    toolsPane?.enableTool('tests');
-  }
-
-  if (!reload) {
-    await loadDefaults();
-
-    // re-run changing theme color after the UI is ready
-    // in case the previous one failed (e.g. in firefox)
-    requestAnimationFrame(() => {
-      changeThemeColor();
-    });
-  }
-
-  parent.dispatchEvent(new Event(customEvents.ready));
-};
-
 const initializePlayground = async (
   options?: {
     config?: Partial<Config>;
@@ -5425,25 +5419,29 @@ const initializePlayground = async (
   },
   initializeFn?: () => void | Promise<void>,
 ) => {
+  const importUrl = params.x || parent.location.hash.substring(1); // for backward compatibility
   const appConfig = options?.config ?? {};
+  const codeImportConfig = importCompressedCode(importUrl);
+  const sdkConfig = importCompressedCode(params.config ?? '');
+  const initialConfig = { ...codeImportConfig, ...appConfig, ...sdkConfig };
   baseUrl = options?.baseUrl ?? '/livecodes/';
   isHeadless = options?.isHeadless ?? false;
   isLite =
     params.mode === 'lite' ||
     (params.lite != null && params.lite !== false) || // for backward compatibility
-    appConfig.mode === 'lite' ||
+    initialConfig.mode === 'lite' ||
     false;
   isEmbed =
     isHeadless ||
     isLite ||
     (options?.isEmbed ?? false) ||
-    appConfig.mode === 'simple' ||
+    initialConfig.mode === 'simple' ||
     params.mode === 'simple';
 
   window.history.replaceState(null, '', './'); // fix URL from "/app" to "/"
   await initializeStores(stores, isEmbed);
-  loadUserConfig(/* updateUI = */ false);
-  setConfig(buildConfig({ ...getConfig(), ...appConfig }));
+  const userConfig = stores.userConfig?.getValue() ?? {};
+  setConfig(buildConfig({ ...getConfig(), ...userConfig, ...initialConfig }));
   configureModes({ config: getConfig(), isEmbed, isLite });
   compiler = (window as any).compiler = await getCompiler({
     config: getConfig(),
@@ -5474,13 +5472,14 @@ const initializePlayground = async (
   }
   importExternalContent({
     config: getConfig(),
+    sdkConfig,
     configUrl: params.config,
     template: params.template,
-    url: params.x || parent.location.hash.substring(1),
+    importUrl: Object.keys(codeImportConfig).length > 0 ? '' : importUrl, // do not re-import compressed code
   }).then(async (contentImported) => {
     if (!contentImported) {
       loadSelectedScreen();
-      await bootstrap();
+      await applyConfig(getConfig(), /* reload = */ false);
     }
     initialized = true;
   });
@@ -5513,9 +5512,23 @@ const createApi = (): API => {
       }
       return false;
     })();
+    const isContentOnlyChange = compareObjects(
+      newConfig,
+      currentConfig as Record<string, any>,
+    ).every((k) => ['markup.content', 'style.content', 'script.content'].includes(k));
 
     setConfig(newAppConfig);
 
+    if (isContentOnlyChange) {
+      for (const key of ['markup', 'style', 'script'] as const) {
+        const content = newConfig[key]?.content;
+        if (content != null) {
+          editors[key].setValue(content);
+        }
+      }
+      return newAppConfig;
+    }
+
     if (hasNewAppLanguage) {
       changeAppLanguage(newConfig.appLanguage!);
       return newAppConfig;
@@ -5526,12 +5539,12 @@ const createApi = (): API => {
     if (shouldReloadCodeEditors) {
       await createEditors(newAppConfig);
     }
-    await applyConfig(newConfig);
+    await applyConfig(newConfig, /* reload = */ true);
     const content = getContentConfig(newConfig as Config);
     const hasContent = Object.values(content).some((value) => value != null);
     if (hasContent) {
       await loadConfig(newAppConfig);
-    } else if (shouldRun) {
+    } else if (shouldRun && newAppConfig.autoupdate === true) {
       await run();
     }
     return newAppConfig;
diff --git a/src/livecodes/deploy/deploy.ts b/src/livecodes/deploy/deploy.ts
index 868c0fdec1..974571728e 100644
--- a/src/livecodes/deploy/deploy.ts
+++ b/src/livecodes/deploy/deploy.ts
@@ -1,10 +1,10 @@
-import type { ContentConfig, User } from '../models';
-import type { getLanguageExtension as getLanguageExtensionFn } from '../languages';
+import { defaultConfig } from '../config/default-config';
 import { getDescriptionFile, getFilesFromConfig } from '../export/utils';
+import type { getLanguageExtension as getLanguageExtensionFn } from '../languages';
+import type { ContentConfig, User } from '../models';
+import { commitFile, commitFiles, type GitHubFile } from '../services/github';
 import { generateId } from '../storage/storage';
 import { safeName } from '../utils/utils';
-import { commitFile, commitFiles, type GitHubFile } from '../services/github';
-import { defaultConfig } from '../config/default-config';
 
 const prepareFiles = ({
   config,
diff --git a/src/livecodes/editor/blockly/blockly.ts b/src/livecodes/editor/blockly/blockly.ts
index 730a2e3bb1..df9f61e63e 100644
--- a/src/livecodes/editor/blockly/blockly.ts
+++ b/src/livecodes/editor/blockly/blockly.ts
@@ -1,5 +1,5 @@
 import { getCustomSettings } from '../../languages';
-import type { BlocklyContent, CustomEditorOptions, Theme, Config } from '../../models';
+import type { BlocklyContent, Config, CustomEditorOptions, Theme } from '../../models';
 import { sandboxService } from '../../services';
 import { debounce } from '../../utils/utils';
 import { blocklyCdnBaseUrl } from '../../vendors';
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 1c2d85624a..9f52969360 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -1,25 +1,25 @@
 import { CodeJar, type Position } from 'codejar';
 import 'prismjs';
-import 'prismjs/plugins/autoloader/prism-autoloader';
-import 'prismjs/plugins/line-numbers/prism-line-numbers';
-import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-tsx';
-import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/plugins/autoloader/prism-autoloader';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
 
 import type {
-  FormatFn,
-  Language,
   CodeEditor,
+  CodejarTheme,
+  Config,
+  EditorConfig,
   EditorOptions,
-  Theme,
   EditorPosition,
-  EditorConfig,
-  Config,
-  CodejarTheme,
+  FormatFn,
+  Language,
+  Theme,
 } from '../../models';
 import { debounce, encodeHTML } from '../../utils/utils';
 import { prismBaseUrl } from '../../vendors';
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index 6b9556d6e6..199efa8e0b 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -6,7 +6,7 @@
 // @ts-ignore
 import { autocompletion } from '@codemirror/autocomplete';
 // @ts-ignore
-import { basicSetup, lineNumbers, closeBrackets } from 'codemirror';
+import { basicSetup, closeBrackets, lineNumbers } from 'codemirror';
 // @ts-ignore
 import { Compartment, EditorState, type Extension } from '@codemirror/state';
 // @ts-ignore
@@ -14,16 +14,10 @@ import { oneDark } from '@codemirror/theme-one-dark';
 // @ts-ignore
 import { EditorView, keymap, type KeyBinding, type ViewUpdate } from '@codemirror/view';
 // @ts-ignore
-import { undo, redo } from '@codemirror/commands';
-import {
-  defaultHighlightStyle,
-  syntaxHighlighting,
-  indentUnit,
-  HighlightStyle,
-  foldEffect,
-  type LanguageSupport,
-  // @ts-ignore
-} from '@codemirror/language';
+import { redo, undo } from '@codemirror/commands';
+// prettier-ignore
+// @ts-ignore
+import { HighlightStyle,defaultHighlightStyle,foldEffect,indentUnit,syntaxHighlighting,type LanguageSupport } from '@codemirror/language';
 // @ts-ignore
 import { tags } from '@lezer/highlight';
 // @ts-ignore
@@ -34,24 +28,24 @@ import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import { colorPicker } from '@replit/codemirror-css-color-picker';
 
 // these are imported normally
+import { getEditorModeNode } from '../../UI/selectors';
 import type {
-  FormatFn,
-  Language,
   CodeEditor,
-  EditorOptions,
-  Theme,
-  EditorPosition,
-  EditorConfig,
-  Config,
   CodemirrorTheme,
+  Config,
+  EditorConfig,
   EditorLibrary,
+  EditorOptions,
+  EditorPosition,
+  FormatFn,
+  Language,
+  Theme,
 } from '../../models';
-import { getEditorModeNode } from '../../UI/selectors';
 import { ctrl, debounce, getRandomString } from '../../utils/utils';
 import { codeMirrorBaseUrl, comlinkBaseUrl } from '../../vendors';
 import { getEditorTheme } from '../themes';
-import { editorLanguages } from './editor-languages';
 import { codemirrorThemes, customThemes } from './codemirror-themes';
+import { editorLanguages } from './editor-languages';
 
 export type CodeiumEditor = Pick<CodeEditor, 'getLanguage' | 'getValue'> & {
   editorId: EditorOptions['editorId'];
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 1620431b3e..1442c170dc 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -1,19 +1,22 @@
 import type * as Monaco from 'monaco-editor';
 
+import { getEditorModeNode } from '../../UI/selectors';
+import { getImports } from '../../compiler/import-map';
 import type {
-  EditorLibrary,
-  FormatFn,
-  Language,
+  APIError,
   CodeEditor,
+  Config,
+  EditorConfig,
+  EditorLibrary,
   EditorOptions,
-  Theme,
   EditorPosition,
-  EditorConfig,
-  PkgInfo,
-  APIError,
+  FormatFn,
+  Language,
   MonacoTheme,
-  Config,
+  PkgInfo,
+  Theme,
 } from '../../models';
+import { pkgInfoService } from '../../services/pkgInfo';
 import { cloneObject, getRandomString, loadScript } from '../../utils/utils';
 import {
   codeiumProviderUrl,
@@ -24,9 +27,6 @@ import {
   monacoVolarUrl,
   vendorsBaseUrl,
 } from '../../vendors';
-import { getImports } from '../../compiler/import-map';
-import { getEditorModeNode } from '../../UI/selectors';
-import { pkgInfoService } from '../../services/pkgInfo';
 import { getEditorTheme } from '../themes';
 import { getCompilerOptions, hasJsx } from '../ts-compiler-options';
 import { customThemes, monacoThemes } from './monaco-themes';
@@ -249,6 +249,49 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     listeners.forEach((fn) => editor.getModel()?.onDidChangeContent(fn));
   };
 
+  const customLanguages: Partial<Record<Language, string>> = {
+    astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
+    clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
+    imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
+    // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
+    wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
+  };
+
+  interface CustomLanguageDefinition {
+    config?: Monaco.languages.LanguageConfiguration;
+    tokens?: Monaco.languages.IMonarchLanguage;
+  }
+
+  const addVueSupport = async () => {
+    if (vueRegistered) return;
+    vueRegistered = true;
+    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
+    const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
+    await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
+    shikiThemes = registerHighlighter(monaco);
+    shikiThemes['custom-vs-light'] = shikiThemes.vs;
+    shikiThemes['custom-vs-dark'] = shikiThemes['vs-dark'];
+    setTheme(currentTheme, currentEditorTheme);
+  };
+
+  const loadMonacoLanguage = async (lang: Language) => {
+    if (monacoMapLanguage(lang) === 'vue') {
+      await addVueSupport();
+      return;
+    }
+    const langUrl = customLanguages[lang];
+    if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
+      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
+      monaco.languages.register({ id: lang });
+      if (mod.config) {
+        monaco.languages.setLanguageConfiguration(lang, mod.config);
+      }
+      if (mod.tokens) {
+        monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
+      }
+    }
+  };
+
   let modelUri = '';
   const setModel = (
     editor: Monaco.editor.IStandaloneCodeEditor,
@@ -276,9 +319,17 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const editor = monaco.editor.create(container, {
     ...editorOptions,
-    language: monacoMapLanguage(language),
+    language: language.startsWith('vue') ? 'html' : monacoMapLanguage(language),
   });
-  setModel(editor, options.value, language);
+  setModel(editor, options.value, language.startsWith('vue') ? 'html' : language);
+  loadMonacoLanguage(language);
+
+  // avoid a race condition that prevents loading vue worker
+  if (language.startsWith('vue')) {
+    setTimeout(() => {
+      setLanguage(language);
+    }, 50);
+  }
 
   const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
     const model = monaco.editor.getModel(uri);
@@ -305,49 +356,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       });
   }
 
-  const customLanguages: Partial<Record<Language, string>> = {
-    astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
-    clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
-    imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
-    // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
-    wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
-  };
-
-  interface CustomLanguageDefinition {
-    config?: Monaco.languages.LanguageConfiguration;
-    tokens?: Monaco.languages.IMonarchLanguage;
-  }
-
-  const addVueSupport = async () => {
-    if (vueRegistered) return;
-    vueRegistered = true;
-    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
-    const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
-    await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
-    shikiThemes = registerHighlighter(monaco);
-    shikiThemes['custom-vs-light'] = shikiThemes.vs;
-    shikiThemes['custom-vs-dark'] = shikiThemes['vs-dark'];
-    setTheme(currentTheme, currentEditorTheme);
-  };
-
-  const loadMonacoLanguage = async (lang: Language) => {
-    if (monacoMapLanguage(lang) === 'vue') {
-      await addVueSupport();
-      return;
-    }
-    const langUrl = customLanguages[lang];
-    if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
-      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
-      monaco.languages.register({ id: lang });
-      if (mod.config) {
-        monaco.languages.setLanguageConfiguration(lang, mod.config);
-      }
-      if (mod.tokens) {
-        monaco.languages.setMonarchTokensProvider(lang, mod.tokens);
-      }
-    }
-  };
-
   const getEditorId = () => editorId;
   const getValue = () => editor.getValue();
   const setValue = (value = '') => {
@@ -440,12 +448,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const setLanguage = (lang: Language, value?: string) => {
     language = lang;
     clearTypes(false);
-    const valueToIsert = value ?? editor.getValue();
+    const valueToInsert = value ?? editor.getValue();
     if (monacoMapLanguage(lang) === 'vue') {
       // avoid race condition of value changing while valor is loading
-      setValue(valueToIsert);
+      setValue(valueToInsert);
     } else {
-      setModel(editor, valueToIsert, language);
+      setModel(editor, valueToInsert, language);
     }
     loadMonacoLanguage(lang).then(() => {
       if (monacoMapLanguage(lang) === 'vue') {
diff --git a/src/livecodes/events/custom-events.ts b/src/livecodes/events/custom-events.ts
index 938b8d124e..48655c7d70 100644
--- a/src/livecodes/events/custom-events.ts
+++ b/src/livecodes/events/custom-events.ts
@@ -1,6 +1,7 @@
 import type { CustomEvents } from '../models';
 
 export const customEvents: CustomEvents = {
+  init: 'livecodes-init',
   getConfig: 'livecodes-get-config',
   config: 'livecodes-config',
   load: 'livecodes-load',
diff --git a/src/livecodes/events/index.ts b/src/livecodes/events/index.ts
index 51bdc1a7cf..5a6f2ebc10 100644
--- a/src/livecodes/events/index.ts
+++ b/src/livecodes/events/index.ts
@@ -1,3 +1,3 @@
-export * from './events';
 export * from './custom-events';
+export * from './events';
 export * from './pub';
diff --git a/src/livecodes/export/export-codepen.ts b/src/livecodes/export/export-codepen.ts
index 46ab1be64d..91557d9627 100644
--- a/src/livecodes/export/export-codepen.ts
+++ b/src/livecodes/export/export-codepen.ts
@@ -1,8 +1,8 @@
-import type { Config, EditorId, Language } from '../models';
 import type {
   getLanguageCompiler as getLanguageCompilerFn,
   getLanguageExtension as getLanguageExtensionFn,
 } from '../languages';
+import type { Config, EditorId, Language } from '../models';
 import { getCompilerScripts, getContent } from './utils';
 
 export const exportCodepen = (
diff --git a/src/livecodes/export/export-jsfiddle.ts b/src/livecodes/export/export-jsfiddle.ts
index c34e119ad9..f285a275da 100644
--- a/src/livecodes/export/export-jsfiddle.ts
+++ b/src/livecodes/export/export-jsfiddle.ts
@@ -1,8 +1,8 @@
-import type { Config, EditorId, Language } from '../models';
 import type {
   getLanguageCompiler as getLanguageCompilerFn,
   getLanguageExtension as getLanguageExtensionFn,
 } from '../languages';
+import type { Config, EditorId, Language } from '../models';
 import { getCompilerScripts, getContent } from './utils';
 
 export const exportJsfiddle = (
diff --git a/src/livecodes/export/export-src.ts b/src/livecodes/export/export-src.ts
index 9584ded011..7e4c085ff0 100644
--- a/src/livecodes/export/export-src.ts
+++ b/src/livecodes/export/export-src.ts
@@ -1,5 +1,5 @@
-import type { EditorId, Config } from '../models';
 import type { getLanguageExtension as getLanguageExtensionFn } from '../languages';
+import type { Config, EditorId } from '../models';
 import { downloadFile, loadScript } from '../utils/utils';
 import { jsZipUrl } from '../vendors';
 import { getFilesFromConfig } from './utils';
diff --git a/src/livecodes/export/utils.ts b/src/livecodes/export/utils.ts
index 2e9d43b0f9..b08352c5f6 100644
--- a/src/livecodes/export/utils.ts
+++ b/src/livecodes/export/utils.ts
@@ -1,9 +1,9 @@
-import type { ContentConfig, EditorId, Config, User, Language } from '../models';
 import { replaceImports } from '../compiler/import-map';
 import type {
   getLanguageCompiler as getLanguageCompilerFn,
   getLanguageExtension as getLanguageExtensionFn,
 } from '../languages';
+import type { Config, ContentConfig, EditorId, Language, User } from '../models';
 import { escapeScript, safeName } from '../utils';
 
 export interface Files {
diff --git a/src/livecodes/formatter/format.worker.ts b/src/livecodes/formatter/format.worker.ts
index 7eb786675a..a6769c2bd9 100644
--- a/src/livecodes/formatter/format.worker.ts
+++ b/src/livecodes/formatter/format.worker.ts
@@ -1,6 +1,6 @@
 import { defaultConfig } from '../config/default-config';
-import type { FormatFn, FormatterConfig, Language, Parser } from '../models';
 import { languages, parserPlugins, prettierUrl } from '../languages';
+import type { FormatFn, FormatterConfig, Language, Parser } from '../models';
 import type { FormatterMessage, FormatterMessageEvent } from './models';
 
 const worker: Worker = self as any;
diff --git a/src/livecodes/formatter/get-formatter.ts b/src/livecodes/formatter/get-formatter.ts
index b3f7f58ff2..cdec830d79 100644
--- a/src/livecodes/formatter/get-formatter.ts
+++ b/src/livecodes/formatter/get-formatter.ts
@@ -1,4 +1,4 @@
-import type { Language, Config } from '../models';
+import type { Config, Language } from '../models';
 import { createFormatter } from './formatter';
 import type { Formatter } from './models';
 
diff --git a/src/livecodes/html/index.ts b/src/livecodes/html/index.ts
index 2226d72184..495a864c0c 100644
--- a/src/livecodes/html/index.ts
+++ b/src/livecodes/html/index.ts
@@ -107,36 +107,36 @@ const codeToImageScreen = /* @__PURE__ */ replaceValues(codeToImageScreenRaw);
 const resultPopupHTML = /* @__PURE__ */ replaceValues(resultPopupHTMLRaw);
 
 export {
-  resultTemplate,
+  aboutScreen,
+  addAssetScreen,
+  addSnippetScreen,
   appHTML,
-  menuProjectHTML,
-  menuSettingsHTML,
-  menuHelpHTML,
-  languageInfo,
-  customSettingsScreen,
-  testEditorScreen,
-  importScreen,
-  deployScreen,
-  syncScreen,
+  assetsScreen,
   backupScreen,
   broadcastScreen,
-  welcomeScreen,
-  aboutScreen,
+  codeToImageScreen,
+  customSettingsScreen,
+  deployScreen,
+  editorSettingsScreen,
+  embedScreen,
+  importScreen,
   infoScreen,
-  resourcesScreen,
   keyboardShortcutsScreen,
+  languageInfo,
   loginScreen,
-  savePromptScreen,
-  recoverPromptScreen,
-  templatesScreen,
+  menuHelpHTML,
+  menuProjectHTML,
+  menuSettingsHTML,
   openScreen,
-  assetsScreen,
-  addAssetScreen,
-  snippetsScreen,
-  addSnippetScreen,
-  shareScreen,
-  embedScreen,
-  editorSettingsScreen,
-  codeToImageScreen,
+  recoverPromptScreen,
+  resourcesScreen,
   resultPopupHTML,
+  resultTemplate,
+  savePromptScreen,
+  shareScreen,
+  snippetsScreen,
+  syncScreen,
+  templatesScreen,
+  testEditorScreen,
+  welcomeScreen,
 };
diff --git a/src/livecodes/html/language-info.html b/src/livecodes/html/language-info.html
index 8ecc715261..940044e9ac 100644
--- a/src/livecodes/html/language-info.html
+++ b/src/livecodes/html/language-info.html
@@ -616,6 +616,40 @@ <h3 data-i18n="language-info:java.name">Java</h3>
     </li>
   </ul>
 </section>
+<section data-lang="jinja">
+  <h3 data-i18n="language-info:jinja.name">Jinja</h3>
+  <div data-i18n="language-info:jinja.desc">
+    Jinja is a fast, expressive, extensible templating engine.
+  </div>
+  <ul data-i18n="language-info:jinja.link" data-i18n-prop="innerHTML">
+    <li>
+      <a href="https://jinja.palletsprojects.com/" target="_blank" rel="noopener"
+        >Official website</a
+      >
+    </li>
+    <li>
+      <a
+        href="https://jinja.palletsprojects.com/en/stable/templates/"
+        target="_blank"
+        rel="noopener"
+        >Template documentation</a
+      >
+    </li>
+    <li>
+      <a
+        href="https://github.com/huggingface/huggingface.js/tree/main/packages/jinja"
+        target="_blank"
+        rel="noopener"
+        >JavaScript implementation</a
+      >
+    </li>
+    <li>
+      <a href="{{DOCS_BASE_URL}}languages/jinja" target="_blank" rel="noopener"
+        >LiveCodes Documentations</a
+      >
+    </li>
+  </ul>
+</section>
 <section data-lang="jsx">
   <h3 data-i18n="language-info:jsx.name">JSX</h3>
   <div data-i18n="language-info:jsx.desc">
diff --git a/src/livecodes/i18n/index.ts b/src/livecodes/i18n/index.ts
index 957d5d4a52..c1e08e5da1 100644
--- a/src/livecodes/i18n/index.ts
+++ b/src/livecodes/i18n/index.ts
@@ -1,3 +1,3 @@
 export * from './i18n';
-export type * from './models';
 export type * from './locales/models';
+export type * from './models';
diff --git a/src/livecodes/i18n/locales/en/language-info.lokalise.json b/src/livecodes/i18n/locales/en/language-info.lokalise.json
index 6c3c375063..bf064d71d7 100644
--- a/src/livecodes/i18n/locales/en/language-info.lokalise.json
+++ b/src/livecodes/i18n/locales/en/language-info.lokalise.json
@@ -344,6 +344,18 @@
     "notes": "",
     "translation": "Java"
   },
+  "jinja.desc": {
+    "notes": "",
+    "translation": "Jinja is a fast, expressive, extensible templating engine."
+  },
+  "jinja.link": {
+    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://jinja.palletsprojects.com/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://jinja.palletsprojects.com/en/stable/templates/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"https://github.com/huggingface/huggingface.js/tree/main/packages/jinja\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"{{DOCS_BASE_URL}}languages/jinja\" target=\"_blank\" rel=\"noopener\" />\n\n",
+    "translation": "<tag-1> <tag-2>Official website</tag-2> </tag-1> <tag-3> <tag-4>Template documentation</tag-4> </tag-3> <tag-5> <tag-6>JavaScript implementation</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentations</tag-8> </tag-7>"
+  },
+  "jinja.name": {
+    "notes": "",
+    "translation": "Jinja"
+  },
   "jsx.desc": {
     "notes": "",
     "translation": "JSX is compiled to JavaScript in LiveCodes using the TypeScript Compiler.  By default it uses React as the JSX runtime."
diff --git a/src/livecodes/i18n/locales/en/language-info.ts b/src/livecodes/i18n/locales/en/language-info.ts
index eb051dcb1e..820583ea22 100644
--- a/src/livecodes/i18n/locales/en/language-info.ts
+++ b/src/livecodes/i18n/locales/en/language-info.ts
@@ -154,6 +154,11 @@ const languageInfo = {
     link: '<1> <2>Java official website</2> </1> <3> <4>DoppioJVM</4> </3> <5> <6>Learn X in Y minutes, where X=java</6> </5> <7> <8>LiveCodes Documentation</8> </7> <9> <10>Load starter template</10> </9>',
     name: 'Java',
   },
+  jinja: {
+    desc: 'Jinja is a fast, expressive, extensible templating engine.',
+    link: '<1> <2>Official website</2> </1> <3> <4>Template documentation</4> </3> <5> <6>JavaScript implementation</6> </5> <7> <8>LiveCodes Documentations</8> </7>',
+    name: 'Jinja',
+  },
   jsx: {
     desc: 'JSX is compiled to JavaScript in LiveCodes using the TypeScript Compiler.  By default it uses React as the JSX runtime.',
     link: '<1> <2>React official website</2> </1> <3> <4>JSX in React documentation</4> </3> <5> <6>LiveCodes Documentations</6> </5>',
diff --git a/src/livecodes/i18n/locales/models.ts b/src/livecodes/i18n/locales/models.ts
index e9fe83309d..57a2f64a09 100644
--- a/src/livecodes/i18n/locales/models.ts
+++ b/src/livecodes/i18n/locales/models.ts
@@ -1,6 +1,6 @@
 import type { RequireAtLeastOne, UnAsConst } from '../models';
-import type Translation from './en/translation';
 import type LangInfoTranslation from './en/language-info';
+import type Translation from './en/translation';
 
 /**
  * Add new translatable attributes here.
diff --git a/src/livecodes/import/__tests__/hosts.spec.ts b/src/livecodes/import/__tests__/hosts.spec.ts
index ad78f2a174..1a08e30635 100644
--- a/src/livecodes/import/__tests__/hosts.spec.ts
+++ b/src/livecodes/import/__tests__/hosts.spec.ts
@@ -1,10 +1,10 @@
 import {
-  isGithubUrl,
   isGithubDir,
   isGithubGist,
-  isGitlabUrl,
+  isGithubUrl,
   isGitlabDir,
   isGitlabSnippet,
+  isGitlabUrl,
   isJsbin,
 } from '../check-src';
 
diff --git a/src/livecodes/import/code.ts b/src/livecodes/import/code.ts
index 5ce4583649..1490e9311e 100644
--- a/src/livecodes/import/code.ts
+++ b/src/livecodes/import/code.ts
@@ -1,8 +1,10 @@
 import type { Config } from '../models';
 import { decompress } from '../utils/compression';
+import { isCompressedCode } from './check-src';
 
 export const importCompressedCode = (url: string) => {
-  const code = url.slice(5);
+  if (!isCompressedCode(url)) return {};
+  const code = url.slice('code/'.length);
   let config: Partial<Config>;
   try {
     config = JSON.parse(decompress(code) || '{}');
diff --git a/src/livecodes/import/dom.ts b/src/livecodes/import/dom.ts
index d45b07f486..a8a8fcc64a 100644
--- a/src/livecodes/import/dom.ts
+++ b/src/livecodes/import/dom.ts
@@ -1,5 +1,5 @@
 import { getLanguageByAlias, getLanguageEditorId, languages } from '../languages';
-import type { EditorId, Language, Config } from '../models';
+import type { Config, EditorId, Language } from '../models';
 import { decodeHTML } from '../utils';
 
 type Selectors = {
diff --git a/src/livecodes/import/files.ts b/src/livecodes/import/files.ts
index b376cedc43..2a3fe5e279 100644
--- a/src/livecodes/import/files.ts
+++ b/src/livecodes/import/files.ts
@@ -1,5 +1,5 @@
 import type { ContentConfig, EventsManager } from '../models';
-import type { populateConfig as populateConfigFn, SourceFile } from './utils';
+import type { SourceFile, populateConfig as populateConfigFn } from './utils';
 import { importFromZip } from './zip';
 
 export const importFromFiles = async (
diff --git a/src/livecodes/import/github-dir.ts b/src/livecodes/import/github-dir.ts
index 7639b036ba..652c047887 100644
--- a/src/livecodes/import/github-dir.ts
+++ b/src/livecodes/import/github-dir.ts
@@ -1,8 +1,8 @@
 import { decode } from 'js-base64';
 import type { User } from '../models';
 import { getGithubHeaders } from '../services/github';
-import { populateConfig } from './utils';
 import { addBaseTag } from './github';
+import { populateConfig } from './utils';
 
 export const importFromGithubDir = async (
   url: string,
diff --git a/src/livecodes/import/github.ts b/src/livecodes/import/github.ts
index ca0f8b6d1c..8ede1a16c1 100644
--- a/src/livecodes/import/github.ts
+++ b/src/livecodes/import/github.ts
@@ -1,6 +1,6 @@
 import { decode } from 'js-base64';
-import type { Language, Config, User, EditorId } from '../models';
 import { getLanguageByAlias, getLanguageEditorId, getLanguageExtension } from '../languages/utils';
+import type { Config, EditorId, Language, User } from '../models';
 import { getGithubHeaders } from '../services/github';
 import { modulesService } from '../services/modules';
 
diff --git a/src/livecodes/import/gitlab.ts b/src/livecodes/import/gitlab.ts
index 00e0cb1a5d..02aa83f19f 100644
--- a/src/livecodes/import/gitlab.ts
+++ b/src/livecodes/import/gitlab.ts
@@ -1,5 +1,5 @@
-import type { Language, Config } from '../models';
 import { getLanguageByAlias, getLanguageEditorId } from '../languages';
+import type { Config, Language } from '../models';
 import { pipe } from '../utils';
 import { getValidUrl } from './check-src';
 
diff --git a/src/livecodes/import/import-src.ts b/src/livecodes/import/import-src.ts
index cdb2cd5230..27ca5ba69d 100644
--- a/src/livecodes/import/import-src.ts
+++ b/src/livecodes/import/import-src.ts
@@ -8,5 +8,5 @@ export { importFromGitlabDir } from './gitlab-dir';
 export { importFromGitlabSnippet } from './gitlab-snippet';
 export { importFromJsbin } from './jsbin';
 export { importTypescriptPlayground } from './typescript-playground';
-export { importVuePlayground } from './vue-playground';
 export { importFromUrl } from './url';
+export { importVuePlayground } from './vue-playground';
diff --git a/src/livecodes/import/import.ts b/src/livecodes/import/import.ts
index 941e8d06b6..9bbbbdf352 100644
--- a/src/livecodes/import/import.ts
+++ b/src/livecodes/import/import.ts
@@ -1,22 +1,22 @@
 import type { Config, User } from '../models';
 import { getValidUrl } from '../utils/utils';
-import { importCompressedCode } from './code';
-import { importProject } from './project-id';
 import {
-  isCompressedCode,
   isCodepen,
+  isCompressedCode,
   isDom,
-  isGithubUrl,
   isGithubDir,
   isGithubGist,
-  isGitlabUrl,
+  isGithubUrl,
   isGitlabDir,
   isGitlabSnippet,
+  isGitlabUrl,
   isJsbin,
   isProjectId,
   isTypescriptPlayground,
   isVuePlayground,
 } from './check-src';
+import { importCompressedCode } from './code';
+import { importProject } from './project-id';
 
 export const importCode = async (
   url: string,
diff --git a/src/livecodes/import/url.ts b/src/livecodes/import/url.ts
index f5b6842184..306589a9ca 100644
--- a/src/livecodes/import/url.ts
+++ b/src/livecodes/import/url.ts
@@ -2,8 +2,8 @@ import { getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type { Config } from '../models';
 import { corsService } from '../services';
 import { importFromDom } from './dom';
-import { importFromZip } from './zip';
 import { populateConfig } from './utils';
+import { importFromZip } from './zip';
 
 const getRawCode = (content: string, lang: string): Partial<Config> => {
   const language = getLanguageByAlias(lang) || 'html';
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index bd956279d7..7b6a510ff8 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -1,5 +1,5 @@
-import { languages, getLanguageByAlias, getLanguageEditorId } from '../languages';
-import type { EditorId, Language, Config } from '../models';
+import { getLanguageByAlias, getLanguageEditorId, languages } from '../languages';
+import type { Config, EditorId, Language } from '../models';
 
 export interface SourceFile {
   filename: string;
diff --git a/src/livecodes/import/zip.ts b/src/livecodes/import/zip.ts
index 82229ee102..aa57bc9dce 100644
--- a/src/livecodes/import/zip.ts
+++ b/src/livecodes/import/zip.ts
@@ -1,6 +1,6 @@
+import type { ContentConfig } from '../models';
 import { loadScript } from '../utils/utils';
 import { jsZipUrl } from '../vendors';
-import type { ContentConfig } from '../models';
 import type { populateConfig as populateConfigFn, SourceFile } from './utils';
 
 export const importFromZip = async (blob: Blob, populateConfig: typeof populateConfigFn) =>
diff --git a/src/livecodes/index.ts b/src/livecodes/index.ts
index f6c4b1d4ab..2e75474a30 100644
--- a/src/livecodes/index.ts
+++ b/src/livecodes/index.ts
@@ -1,14 +1,20 @@
+import { customEvents } from './events/custom-events';
 import type { I18nKeyType } from './i18n';
+import { clickToLoad, isEmbed, livecodes, loading, params } from './main';
 import type { Config, CustomEvents } from './models';
-import { livecodes, params, isEmbed, clickToLoad, loading } from './main';
-import { customEvents } from './events/custom-events';
 
+const sdkVersion = params.get('sdkVersion');
 const rootSelector = '#livecodes';
 const loadingEl = document.querySelector<HTMLElement>('#loading')!;
 const loadingText = document.querySelector<HTMLElement>('#loading-text')!;
 const loadingHTML = loadingEl.innerHTML;
 
 if (isEmbed) {
+  parent.postMessage(
+    { type: customEvents.init, payload: { appVersion: process.env.VERSION } },
+    '*',
+  );
+
   document.body.classList.add('embed');
   if (clickToLoad) {
     loadingEl.classList.add('click-to-load');
@@ -107,7 +113,8 @@ window.addEventListener(customEvents.destroy, () => {
   document.head.innerHTML = '';
 });
 
-if (isEmbed && params.get('config') === 'sdk') {
+// for backward-compatibility
+if (isEmbed && params.get('config') === 'sdk' && !sdkVersion) {
   addEventListener(
     'message',
     function configHandler(
diff --git a/src/livecodes/languages/asciidoc/lang-asciidoc.ts b/src/livecodes/languages/asciidoc/lang-asciidoc.ts
index 02e5304d5b..85de07c8bd 100644
--- a/src/livecodes/languages/asciidoc/lang-asciidoc.ts
+++ b/src/livecodes/languages/asciidoc/lang-asciidoc.ts
@@ -11,6 +11,8 @@ export const asciidoc: LanguageSpecs = {
       const asciidoctor = (window as any).Asciidoctor();
       return async (code, { config }) =>
         asciidoctor.convert(code, {
+          standalone: true,
+          attributes: { nofooter: true },
           ...getLanguageCustomSettings('asciidoc', config),
         });
     },
diff --git a/src/livecodes/languages/astro/lang-astro-compiler.ts b/src/livecodes/languages/astro/lang-astro-compiler.ts
index 679bd569ff..38d2f0dc80 100644
--- a/src/livecodes/languages/astro/lang-astro-compiler.ts
+++ b/src/livecodes/languages/astro/lang-astro-compiler.ts
@@ -1,8 +1,8 @@
 import { compileInCompiler } from '../../compiler/compile-in-compiler';
 import { replaceImports } from '../../compiler/import-map';
 import type { CompilerFunction, Config } from '../../models';
-import { astroBaseUrl, astroWasmURL } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { astroBaseUrl, astroWasmURL } from '../../vendors';
 
 const internalURL = astroBaseUrl + 'index.min.js';
 
diff --git a/src/livecodes/languages/babel/lang-babel.ts b/src/livecodes/languages/babel/lang-babel.ts
index 83ee9b1142..61a3d17370 100644
--- a/src/livecodes/languages/babel/lang-babel.ts
+++ b/src/livecodes/languages/babel/lang-babel.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { babelUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { babelUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const babel: LanguageSpecs = {
diff --git a/src/livecodes/languages/clio/lang-clio-compiler.ts b/src/livecodes/languages/clio/lang-clio-compiler.ts
index 3a18d72064..9cf409af9c 100644
--- a/src/livecodes/languages/clio/lang-clio-compiler.ts
+++ b/src/livecodes/languages/clio/lang-clio-compiler.ts
@@ -1,6 +1,6 @@
 import type { CompilerFunction } from '../../models';
-import { clioBaseUrl } from '../../vendors';
 import { escapeCode } from '../../utils';
+import { clioBaseUrl } from '../../vendors';
 
 (self as any).createClioCompiler = (): CompilerFunction => async (code) => {
   if (!code) return '';
diff --git a/src/livecodes/languages/clojurescript/lang-clojurescript.ts b/src/livecodes/languages/clojurescript/lang-clojurescript.ts
index 9aa685cd8d..60199edeee 100644
--- a/src/livecodes/languages/clojurescript/lang-clojurescript.ts
+++ b/src/livecodes/languages/clojurescript/lang-clojurescript.ts
@@ -1,5 +1,5 @@
-import type { LanguageSpecs } from '../../models';
 import { compileInCompiler } from '../../compiler';
+import type { LanguageSpecs } from '../../models';
 import { cherryCljsBaseUrl, squintCljsBaseUrl } from '../../vendors';
 import { parenFormatter } from '../commonlisp';
 
diff --git a/src/livecodes/languages/coffeescript/lang-coffeescript.ts b/src/livecodes/languages/coffeescript/lang-coffeescript.ts
index 63dde88256..10e8d21e14 100644
--- a/src/livecodes/languages/coffeescript/lang-coffeescript.ts
+++ b/src/livecodes/languages/coffeescript/lang-coffeescript.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { coffeeScriptUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { coffeeScriptUrl } from '../../vendors';
 
 export const coffeescript: LanguageSpecs = {
   name: 'coffeescript',
diff --git a/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts b/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts
index d849e05da8..ff45f7120b 100644
--- a/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts
+++ b/src/livecodes/languages/diagrams/lang-diagrams-compiler-esm.ts
@@ -1,14 +1,14 @@
 /* eslint-disable no-console */
 import { decode } from 'js-base64';
-import type { Config, CompilerFunction } from '../../models';
+import type { CompilerFunction, Config } from '../../models';
 import {
   blobToBase64,
+  getLanguageCustomSettings,
   getWorkerDataURL,
   loadScript,
-  stringToValidJson,
-  getLanguageCustomSettings,
   removeComments,
   runOrContinue,
+  stringToValidJson,
   toDataUrl,
 } from '../../utils/utils';
 import {
diff --git a/src/livecodes/languages/fennel/lang-fennel.ts b/src/livecodes/languages/fennel/lang-fennel.ts
index 005854dd25..54ca13d5d4 100644
--- a/src/livecodes/languages/fennel/lang-fennel.ts
+++ b/src/livecodes/languages/fennel/lang-fennel.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { parenFormatter } from '../commonlisp';
 import { luaUrl } from '../../vendors';
+import { parenFormatter } from '../commonlisp';
 
 export const fennel: LanguageSpecs = {
   name: 'fennel',
diff --git a/src/livecodes/languages/flow/lang-flow.ts b/src/livecodes/languages/flow/lang-flow.ts
index 52b42eca51..198df902b8 100644
--- a/src/livecodes/languages/flow/lang-flow.ts
+++ b/src/livecodes/languages/flow/lang-flow.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { vendorsBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { vendorsBaseUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const flow: LanguageSpecs = {
diff --git a/src/livecodes/languages/gleam/lang-gleam-compiler.ts b/src/livecodes/languages/gleam/lang-gleam-compiler.ts
index 5748b69783..0169309262 100644
--- a/src/livecodes/languages/gleam/lang-gleam-compiler.ts
+++ b/src/livecodes/languages/gleam/lang-gleam-compiler.ts
@@ -4,7 +4,7 @@
 import type { CompilerFunction } from '../../models';
 import { gleamBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../utils';
-import { type Modules, modules } from './gleam-modules';
+import { modules, type Modules } from './gleam-modules';
 
 (self as any).createGleamCompiler = (): CompilerFunction => {
   const compilerUrl = gleamBaseUrl + 'compiler/v1.3.0-rc1/gleam_wasm.js';
diff --git a/src/livecodes/languages/java/lang-java-script.ts b/src/livecodes/languages/java/lang-java-script.ts
index bd47e1e3db..a8dcfb94a1 100644
--- a/src/livecodes/languages/java/lang-java-script.ts
+++ b/src/livecodes/languages/java/lang-java-script.ts
@@ -2,7 +2,7 @@
 /* eslint-disable no-console */
 
 import { createWorkerFromContent } from '../../utils/utils';
-import { doppioJvmBaseUrl, browserfsUrl } from '../../vendors';
+import { browserfsUrl, doppioJvmBaseUrl } from '../../vendors';
 
 const doppioJvmUrl = doppioJvmBaseUrl + 'doppio.js';
 const doppioJvmJarsUrl = doppioJvmBaseUrl + 'java_home/';
diff --git a/src/livecodes/languages/jinja/index.ts b/src/livecodes/languages/jinja/index.ts
new file mode 100644
index 0000000000..c9edbf5409
--- /dev/null
+++ b/src/livecodes/languages/jinja/index.ts
@@ -0,0 +1 @@
+export * from './lang-jinja';
diff --git a/src/livecodes/languages/jinja/lang-jinja-compiler.ts b/src/livecodes/languages/jinja/lang-jinja-compiler.ts
new file mode 100644
index 0000000000..1afa3600f3
--- /dev/null
+++ b/src/livecodes/languages/jinja/lang-jinja-compiler.ts
@@ -0,0 +1,28 @@
+import type { CompilerFunction } from '../../models';
+import { escapeCode } from '../../utils';
+import { jinjaUrl } from './lang-jinja';
+
+(self as any).createJinjaCompiler =
+  (): CompilerFunction =>
+  async (code, { config }) => {
+    const data = config.customSettings.template?.data || {};
+    if (config.customSettings.template?.prerender !== false) {
+      const template = new (self as any).Jinja.Template(code);
+      return template.render(data);
+    }
+    return `<!-- ... compiling ... -->
+
+<script src="${jinjaUrl}"></script>
+<script>
+window.addEventListener("load", () => {
+const template = new Jinja.Template(\`${escapeCode(code)}\`);
+const content = template.render({
+...${escapeCode(JSON.stringify(data || {}))},
+...window.livecodes?.templateData,
+});
+document.body.innerHTML += content
+parent.postMessage({type: 'compiled', payload: {language: 'jinja', content}}, '*');
+});
+</script>
+`;
+  };
diff --git a/src/livecodes/languages/jinja/lang-jinja.ts b/src/livecodes/languages/jinja/lang-jinja.ts
new file mode 100644
index 0000000000..124c5db363
--- /dev/null
+++ b/src/livecodes/languages/jinja/lang-jinja.ts
@@ -0,0 +1,30 @@
+import type { LanguageSpecs } from '../../models';
+import { vendorsBaseUrl } from '../../vendors';
+
+export const jinjaUrl = `${vendorsBaseUrl}jinja/jinja.js`;
+
+export const jinja: LanguageSpecs = {
+  name: 'jinja',
+  title: 'Jinja',
+  formatter: {
+    factory: () => {
+      (self as any).importScripts(jinjaUrl);
+      return async (code, cursorOffset, formatterConfig) => {
+        const formatted = new (self as any).Jinja.Template(code).format({
+          indent: formatterConfig?.tabSize || 2,
+        });
+        return { formatted, cursorOffset };
+      };
+    },
+  },
+  compiler: {
+    url: jinjaUrl,
+    factory: (_config, baseUrl) => {
+      (self as any).importScripts(baseUrl + '{{hash:lang-jinja-compiler.js}}');
+      return (self as any).createJinjaCompiler();
+    },
+  },
+  extensions: ['jinja'],
+  editor: 'markup',
+  editorLanguage: 'html',
+};
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 6d8dd7fa2a..9f318652af 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -1,82 +1,83 @@
 import type { LanguageSpecs } from '../models';
+import { artTemplate } from './art-template';
 import { asciidoc } from './asciidoc';
+import { assemblyscript } from './assemblyscript';
+import { astro } from './astro';
 import { babel } from './babel';
+import { bbcode } from './bbcode';
+import { blockly } from './blockly';
+import { civet } from './civet';
+import { clio } from './clio';
+import { clojurescript } from './clojurescript';
+import { coffeescript } from './coffeescript';
+import { commonlisp } from './commonlisp';
+import { cpp } from './cpp';
+import { cppWasm } from './cpp-wasm';
+import { csharpWasm } from './csharp-wasm';
 import { css } from './css';
+import { diagrams } from './diagrams';
+import { dot } from './dot';
+import { ejs } from './ejs';
+import { eta } from './eta';
+import { fennel } from './fennel';
+import { flow } from './flow';
+import { gleam } from './gleam';
+import { go } from './go';
 import { haml } from './haml';
+import { handlebars } from './handlebars';
 import { html } from './html';
+import { imba } from './imba';
+import { java } from './java';
 import { javascript } from './javascript';
+import { jinja } from './jinja';
 import { jsx, tsx } from './jsx';
+import { julia } from './julia';
 import { less } from './less';
+import { liquid } from './liquid';
+import { livescript } from './livescript';
+import { lua } from './lua';
+import { luaWasm } from './lua-wasm';
+import { malina } from './malina';
 import { markdown } from './markdown';
 import { mdx } from './mdx';
+import { mjml } from './mjml';
+import { mustache } from './mustache';
+import { nunjucks } from './nunjucks';
+import { ocaml } from './ocaml';
+import { perl } from './perl';
+import { php } from './php';
+import { phpWasm } from './php-wasm';
+import { postgresql } from './postgresql';
+import { prolog } from './prolog';
 import { pug } from './pug';
-import { scss, sass } from './scss';
-import { svelte, svelteApp } from './svelte';
-import { stylus } from './stylus';
-import { typescript } from './typescript';
-import { vue, vueApp } from './vue';
-import { vue2 } from './vue2';
-import { stencil } from './stencil';
-import { coffeescript } from './coffeescript';
-import { livescript } from './livescript';
-import { assemblyscript } from './assemblyscript';
 import { python } from './python';
-import { ruby } from './ruby';
-import { php } from './php';
-import { perl } from './perl';
-import { lua } from './lua';
-import { scheme } from './scheme';
-import { solid, solidTsx } from './solid';
 import { pythonWasm } from './python-wasm';
-import { liquid } from './liquid';
-import { ejs } from './ejs';
-import { handlebars } from './handlebars';
-import { dot } from './dot';
-import { nunjucks } from './nunjucks';
-import { go } from './go';
-import { rescript } from './rescript';
+import { r } from './r';
+import { react, reactTsx } from './react';
+import { reactNative, reactNativeTsx } from './react-native';
 import { reason } from './reason';
-import { ocaml } from './ocaml';
-import { wat } from './wat';
+import { rescript } from './rescript';
+import { richtext } from './richtext';
 import { riot } from './riot';
+import { ruby } from './ruby';
+import { rubyWasm } from './ruby-wasm';
+import { scheme } from './scheme';
+import { sass, scss } from './scss';
+import { solid, solidTsx } from './solid';
 import { sql } from './sql';
-import { reactNative, reactNativeTsx } from './react-native';
-import { blockly } from './blockly';
-import { twig } from './twig';
-import { astro } from './astro';
-import { malina } from './malina';
-import { commonlisp } from './commonlisp';
-import { cpp } from './cpp';
-import { julia } from './julia';
-import { cppWasm } from './cpp-wasm';
-import { tcl } from './tcl';
-import { prolog } from './prolog';
-import { clio } from './clio';
-import { richtext } from './richtext';
-import { diagrams } from './diagrams';
-import { imba } from './imba';
-import { mustache } from './mustache';
-import { artTemplate } from './art-template';
-import { r } from './r';
-import { civet } from './civet';
-import { fennel } from './fennel';
-import { teal } from './teal';
+import { stencil } from './stencil';
 import { stylis } from './stylis';
-import { flow } from './flow';
-import { mjml } from './mjml';
+import { stylus } from './stylus';
 import { sucrase } from './sucrase';
-import { eta } from './eta';
-import { clojurescript } from './clojurescript';
-import { rubyWasm } from './ruby-wasm';
-import { luaWasm } from './lua-wasm';
-import { phpWasm } from './php-wasm';
-import { bbcode } from './bbcode';
-import { postgresql } from './postgresql';
-import { gleam } from './gleam';
+import { svelte, svelteApp } from './svelte';
+import { tcl } from './tcl';
+import { teal } from './teal';
+import { twig } from './twig';
+import { typescript } from './typescript';
 import { vento } from './vento';
-import { react, reactTsx } from './react';
-import { java } from './java';
-import { csharpWasm } from './csharp-wasm';
+import { vue, vueApp } from './vue';
+import { vue2 } from './vue2';
+import { wat } from './wat';
 export const languages: LanguageSpecs[] = [
   html,
   markdown,
@@ -95,6 +96,7 @@ export const languages: LanguageSpecs[] = [
   twig,
   vento,
   artTemplate,
+  jinja,
   bbcode,
   mjml,
   diagrams,
diff --git a/src/livecodes/languages/less/lang-less.ts b/src/livecodes/languages/less/lang-less.ts
index f856dfb1a9..5c9e2b2a26 100644
--- a/src/livecodes/languages/less/lang-less.ts
+++ b/src/livecodes/languages/less/lang-less.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { vendorsBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { vendorsBaseUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const less: LanguageSpecs = {
diff --git a/src/livecodes/languages/livescript/lang-livescript.ts b/src/livecodes/languages/livescript/lang-livescript.ts
index 9f0e75893b..a8db1be7fd 100644
--- a/src/livecodes/languages/livescript/lang-livescript.ts
+++ b/src/livecodes/languages/livescript/lang-livescript.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { vendorsBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { vendorsBaseUrl } from '../../vendors';
 
 export const livescript: LanguageSpecs = {
   name: 'livescript',
diff --git a/src/livecodes/languages/malina/lang-malina-compiler.ts b/src/livecodes/languages/malina/lang-malina-compiler.ts
index 5aaff754a6..1f486341d8 100644
--- a/src/livecodes/languages/malina/lang-malina-compiler.ts
+++ b/src/livecodes/languages/malina/lang-malina-compiler.ts
@@ -1,7 +1,7 @@
-import type { CompilerFunction } from '../../models';
 import { compileAllBlocks } from '../../compiler';
-import { acornUrl, astringUrl, cjs2esUrl, csstreeUrl, malinaBaseUrl } from '../../vendors';
+import type { CompilerFunction } from '../../models';
 import { getLanguageCustomSettings } from '../../utils';
+import { acornUrl, astringUrl, cjs2esUrl, csstreeUrl, malinaBaseUrl } from '../../vendors';
 
 (self as any).createMalinaCompiler = (): CompilerFunction => {
   (self as any).importScripts(acornUrl, astringUrl, csstreeUrl, cjs2esUrl);
diff --git a/src/livecodes/languages/markdown/lang-markdown.ts b/src/livecodes/languages/markdown/lang-markdown.ts
index a7d66ab8c4..228630bf59 100644
--- a/src/livecodes/languages/markdown/lang-markdown.ts
+++ b/src/livecodes/languages/markdown/lang-markdown.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { markedUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { markedUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const markdown: LanguageSpecs = {
diff --git a/src/livecodes/languages/mdx/lang-mdx.ts b/src/livecodes/languages/mdx/lang-mdx.ts
index 39aa6b1afe..34335ed11b 100644
--- a/src/livecodes/languages/mdx/lang-mdx.ts
+++ b/src/livecodes/languages/mdx/lang-mdx.ts
@@ -1,5 +1,5 @@
-import type { CompilerFunction, LanguageSpecs } from '../../models';
 import { compileInCompiler } from '../../compiler/compile-in-compiler';
+import type { CompilerFunction, LanguageSpecs } from '../../models';
 import { escapeCode, getLanguageCustomSettings } from '../../utils';
 import { vendorsBaseUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
diff --git a/src/livecodes/languages/php-wasm/lang-php-wasm.ts b/src/livecodes/languages/php-wasm/lang-php-wasm.ts
index ccd3ef12be..e2a2afd057 100644
--- a/src/livecodes/languages/php-wasm/lang-php-wasm.ts
+++ b/src/livecodes/languages/php-wasm/lang-php-wasm.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { parserPlugins } from '../prettier';
 import { vendorsBaseUrl } from '../../vendors';
+import { parserPlugins } from '../prettier';
 
 export const phpWasm: LanguageSpecs = {
   name: 'php-wasm',
diff --git a/src/livecodes/languages/postcss/index.ts b/src/livecodes/languages/postcss/index.ts
index 445ff270eb..f36e483cb0 100644
--- a/src/livecodes/languages/postcss/index.ts
+++ b/src/livecodes/languages/postcss/index.ts
@@ -1,2 +1,2 @@
-export * from './processor-postcss';
 export * from './postcss-plugins';
+export * from './processor-postcss';
diff --git a/src/livecodes/languages/postcss/postcss-plugins.ts b/src/livecodes/languages/postcss/postcss-plugins.ts
index 8c6a0a918b..f22e2c694f 100644
--- a/src/livecodes/languages/postcss/postcss-plugins.ts
+++ b/src/livecodes/languages/postcss/postcss-plugins.ts
@@ -1,6 +1,6 @@
 import type { ProcessorSpecs } from '../../models';
-import { postcssImportUrlUrl, vendorsBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { postcssImportUrlUrl, vendorsBaseUrl } from '../../vendors';
 
 export const autoprefixer: ProcessorSpecs = {
   name: 'autoprefixer',
diff --git a/src/livecodes/languages/processors.ts b/src/livecodes/languages/processors.ts
index 8df25344b0..86e514acfb 100644
--- a/src/livecodes/languages/processors.ts
+++ b/src/livecodes/languages/processors.ts
@@ -1,14 +1,14 @@
 import type { ProcessorSpecs } from '../models';
 import { lightningcss } from './lightningcss';
 import {
-  postcss,
   autoprefixer,
-  postcssPresetEnv,
+  cssModules,
+  cssnano,
+  postcss,
   postcssImportUrl,
-  tokencss,
+  postcssPresetEnv,
   purgecss,
-  cssnano,
-  cssModules,
+  tokencss,
 } from './postcss';
 import { tailwindcss } from './tailwindcss';
 import { unocss } from './unocss';
diff --git a/src/livecodes/languages/python/lang-python.ts b/src/livecodes/languages/python/lang-python.ts
index fb05ca7358..7d66c78c73 100644
--- a/src/livecodes/languages/python/lang-python.ts
+++ b/src/livecodes/languages/python/lang-python.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { brythonBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils/utils';
+import { brythonBaseUrl } from '../../vendors';
 
 const brythonUrl = brythonBaseUrl + 'brython.min.js';
 const stdlibUrl = brythonBaseUrl + 'brython_stdlib.js';
diff --git a/src/livecodes/languages/react-native/lang-react-native.ts b/src/livecodes/languages/react-native/lang-react-native.ts
index c345b8820a..7d42309368 100644
--- a/src/livecodes/languages/react-native/lang-react-native.ts
+++ b/src/livecodes/languages/react-native/lang-react-native.ts
@@ -1,8 +1,8 @@
 import type { LanguageSpecs } from '../../models';
 import { vendorsBaseUrl } from '../../vendors';
+import { parserPlugins } from '../prettier';
 import { typescriptOptions } from '../typescript';
 import { getLanguageCustomSettings } from '../utils';
-import { parserPlugins } from '../prettier';
 
 const reactNativeWebUrl = vendorsBaseUrl + 'react-native-web/react-native-web.js';
 
diff --git a/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts b/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts
index 9393309f5b..c12bf5243d 100644
--- a/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts
+++ b/src/livecodes/languages/rescript/lang-rescript-compiler-esm.ts
@@ -1,3 +1,4 @@
+import { importsPattern } from '../../compiler/import-map';
 import type { CompilerFunction, Language } from '../../models';
 import { getAbsoluteUrl, loadScript } from '../../utils';
 import {
@@ -8,7 +9,6 @@ import {
   rescriptCdnBaseUrl,
   rescriptStdLibBaseUrl,
 } from '../../vendors';
-import { importsPattern } from '../../compiler/import-map';
 
 declare const window: Window & {
   require: any;
diff --git a/src/livecodes/languages/ruby/lang-ruby.ts b/src/livecodes/languages/ruby/lang-ruby.ts
index 98a2f371df..888622cca7 100644
--- a/src/livecodes/languages/ruby/lang-ruby.ts
+++ b/src/livecodes/languages/ruby/lang-ruby.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { opalBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { opalBaseUrl } from '../../vendors';
 
 declare const importScripts: (...args: string[]) => void;
 
diff --git a/src/livecodes/languages/scss/index.ts b/src/livecodes/languages/scss/index.ts
index 4ed5bb653c..fc31d35c63 100644
--- a/src/livecodes/languages/scss/index.ts
+++ b/src/livecodes/languages/scss/index.ts
@@ -1,2 +1,2 @@
-export * from './lang-scss';
 export * from './lang-sass';
+export * from './lang-scss';
diff --git a/src/livecodes/languages/stencil/lang-stencil.ts b/src/livecodes/languages/stencil/lang-stencil.ts
index 4a7b8168ef..906ee582ac 100644
--- a/src/livecodes/languages/stencil/lang-stencil.ts
+++ b/src/livecodes/languages/stencil/lang-stencil.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { stencilUrl, vendorsBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { stencilUrl, vendorsBaseUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const stencil: LanguageSpecs = {
diff --git a/src/livecodes/languages/sucrase/lang-sucrase.ts b/src/livecodes/languages/sucrase/lang-sucrase.ts
index b11bb16067..9459ac9fde 100644
--- a/src/livecodes/languages/sucrase/lang-sucrase.ts
+++ b/src/livecodes/languages/sucrase/lang-sucrase.ts
@@ -1,6 +1,6 @@
 import type { LanguageSpecs } from '../../models';
-import { vendorsBaseUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { vendorsBaseUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const sucrase: LanguageSpecs = {
diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index 490f019fd3..db09c48149 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -1,8 +1,8 @@
-import type { CompilerFunction, Config, Language } from '../../models';
+import { getCompileResult } from '../../compiler';
 import { compileAllBlocks } from '../../compiler/compile-blocks';
 import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
-import { getLanguageCustomSettings, getLanguageByAlias } from '../utils';
-import { getCompileResult } from '../../compiler';
+import type { CompilerFunction, Config, Language } from '../../models';
+import { getLanguageByAlias, getLanguageCustomSettings } from '../utils';
 
 (self as any).createSvelteCompiler = (): CompilerFunction => {
   const MAIN_FILE = '__LiveCodes_App__.svelte';
diff --git a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
index 2d2394586f..ce1491dba9 100644
--- a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
+++ b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
@@ -1,10 +1,10 @@
 /* eslint-disable no-bitwise */
-import type { CompilerFunction, Config, Language } from '../../models';
 import { compileInCompiler, isBare, replaceStyleImports } from '../../compiler';
+import type { CompilerFunction, Config, Language } from '../../models';
+import { modulesService } from '../../services';
 import { getLanguageCustomSettings } from '../../utils/utils';
 import { tailwindcss3Url, tailwindcssBaseUrl, vendorsBaseUrl } from '../../vendors';
 import { lightningcssFeatures } from '../lightningcss/processor-lightningcss-compiler';
-import { modulesService } from '../../services';
 
 declare const self: any;
 
diff --git a/src/livecodes/languages/typescript/lang-typescript.ts b/src/livecodes/languages/typescript/lang-typescript.ts
index 0df5a43b92..5aad236381 100644
--- a/src/livecodes/languages/typescript/lang-typescript.ts
+++ b/src/livecodes/languages/typescript/lang-typescript.ts
@@ -1,6 +1,6 @@
 import type { Config, LanguageSpecs } from '../../models';
-import { typescriptUrl } from '../../vendors';
 import { getLanguageCustomSettings } from '../../utils';
+import { typescriptUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const hasCustomJsxRuntime = (code: string, config: Config) => {
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index c8bb8a0141..d75e20f28d 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -1,4 +1,4 @@
-import type { Compiler, Language, CustomSettings, Config, Processor } from '../models';
+import type { Compiler, Config, CustomSettings, Language, Processor } from '../models';
 import { getLanguageCustomSettings } from '../utils/utils';
 import { highlightjsUrl } from '../vendors';
 import { languages } from './languages';
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index b158836449..a7c5f8e5c0 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -1,8 +1,8 @@
-import type { CompilerFunction, Config } from '../../models';
-import type { LanguageOrProcessor } from '../../compiler/models';
-import { compileInCompiler } from '../../compiler/compile-in-compiler';
 import { compileAllBlocks, exportDefaultImports } from '../../compiler/compile-blocks';
+import { compileInCompiler } from '../../compiler/compile-in-compiler';
 import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
+import type { LanguageOrProcessor } from '../../compiler/models';
+import type { CompilerFunction, Config } from '../../models';
 import { getRandomString, replaceAsync } from '../../utils/utils';
 import { getLanguageByAlias } from '../utils';
 
diff --git a/src/livecodes/languages/vue2/lang-vue2-compiler.ts b/src/livecodes/languages/vue2/lang-vue2-compiler.ts
index e1d7bd67bc..28255cf1ad 100644
--- a/src/livecodes/languages/vue2/lang-vue2-compiler.ts
+++ b/src/livecodes/languages/vue2/lang-vue2-compiler.ts
@@ -1,5 +1,5 @@
-import type { CDN, CompilerFunction } from '../../models';
 import { compileAllBlocks } from '../../compiler/compile-blocks';
+import type { CDN, CompilerFunction } from '../../models';
 import { modulesService } from '../../services/modules';
 import { escapeCode } from '../../utils';
 
diff --git a/src/livecodes/main.ts b/src/livecodes/main.ts
index f93f4af37f..b65d9c8f4a 100644
--- a/src/livecodes/main.ts
+++ b/src/livecodes/main.ts
@@ -1,11 +1,11 @@
+import { customEvents } from './events/custom-events';
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import appHTML from './html/app.html?raw';
-import { customEvents } from './events/custom-events';
 import type { API, CDN, Config, CustomEvents, EmbedOptions } from './models';
+import { modulesService } from './services/modules';
 import { isInIframe } from './utils/utils';
 import { codeMirrorBaseUrl, esModuleShimsPath } from './vendors';
-import { modulesService } from './services/modules';
 
 export type { API, Config };
 
diff --git a/src/livecodes/notifications/create-notifications.ts b/src/livecodes/notifications/create-notifications.ts
index 813f26eaea..2289a953b3 100644
--- a/src/livecodes/notifications/create-notifications.ts
+++ b/src/livecodes/notifications/create-notifications.ts
@@ -1,21 +1,21 @@
 import {
   createSnackbar,
   destroyAllSnackbars,
+  type Action,
   type Message,
   type SnackOptions,
-  type Action,
 } from '@snackbar/core';
 import { getConfig } from '../config';
 import type { Notifications } from '../models';
 import {
+  acceptButton,
+  closeButton,
+  dangerTheme,
+  darkTheme,
   infoTheme,
+  lightTheme,
   successTheme,
   warningTheme,
-  dangerTheme,
-  closeButton,
-  acceptButton,
-  lightTheme,
-  darkTheme,
 } from './snackbar';
 
 export const hasOpenNotifications = () => document.querySelectorAll('.snackbar').length > 0;
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index e1fd2ebfbf..1610161a45 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -1,19 +1,19 @@
 import {
-  createImportMap,
   createCSSModulesImportMap,
+  createImportMap,
   getImports,
+  hasDefaultExport,
   hasImports,
   isModuleScript,
-  hasDefaultExport,
-  replaceImports,
   isScriptImport,
+  replaceImports,
 } from '../compiler';
 import { cssPresets, getLanguageCompiler, getLanguageExtension } from '../languages';
-import { hasCustomJsxRuntime } from '../languages/typescript';
 import { reactRuntime } from '../languages/jsx/react-runtime';
 import { reactNativeRuntime } from '../languages/react-native/react-native-runtime';
 import { solidRuntime } from '../languages/solid/solid-runtime';
-import type { Cache, EditorId, Config, CompileInfo, Language } from '../models';
+import { hasCustomJsxRuntime } from '../languages/typescript';
+import type { Cache, CompileInfo, Config, EditorId, Language } from '../models';
 import { getAppCDN, modulesService } from '../services';
 import { testImports } from '../toolspane/test-imports';
 import {
@@ -25,7 +25,7 @@ import {
   objectMap,
   toDataUrl,
 } from '../utils';
-import { esModuleShimsPath, browserJestUrl, spacingJsUrl } from '../vendors';
+import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
 
 export const createResultPage = async ({
   code,
diff --git a/src/livecodes/services/firebase.ts b/src/livecodes/services/firebase.ts
index ce7a36508f..4dafe232c9 100644
--- a/src/livecodes/services/firebase.ts
+++ b/src/livecodes/services/firebase.ts
@@ -1,6 +1,6 @@
-export { initializeApp, getApp } from 'firebase/app';
+export { getApp, initializeApp } from 'firebase/app';
+export { GithubAuthProvider, getAuth, signInWithPopup, signOut } from 'firebase/auth';
 export type { User as FirebaseUser } from 'firebase/auth';
-export { getAuth, signInWithPopup, signOut, GithubAuthProvider } from 'firebase/auth';
 
 export const firebaseConfig = {
   apiKey: 'AIzaSyB352dJ_NKCZ43G5kv9Lt-sb5nMXTJRONQ',
diff --git a/src/livecodes/storage/index.ts b/src/livecodes/storage/index.ts
index ffd967ea50..d8de2fad7b 100644
--- a/src/livecodes/storage/index.ts
+++ b/src/livecodes/storage/index.ts
@@ -1,17 +1,17 @@
-export * from './storage';
-export * from './project-storage';
-export * from './simple-storage';
-export * from './fake-storage';
-export * from './stores';
 export * from './encrypt';
+export * from './fake-storage';
 export type {
-  Storage,
   ProjectStorage,
-  StorageItem,
   RecoverItem,
   SavedProject,
   SimpleStorage,
-  Stores,
+  Storage,
   StorageData,
+  StorageItem,
   StoreName,
+  Stores,
 } from './models';
+export * from './project-storage';
+export * from './simple-storage';
+export * from './storage';
+export * from './stores';
diff --git a/src/livecodes/storage/simple-storage.ts b/src/livecodes/storage/simple-storage.ts
index d7caacc068..22cee4a0f9 100644
--- a/src/livecodes/storage/simple-storage.ts
+++ b/src/livecodes/storage/simple-storage.ts
@@ -1,6 +1,6 @@
 import { createPub } from '../events';
-import type { SimpleStorage, StoreName } from './models';
 import { fakeSimpleStorage } from './fake-storage';
+import type { SimpleStorage, StoreName } from './models';
 
 /**
  * Creates a simple synchronous key/value data store using localstorage
diff --git a/src/livecodes/storage/storage.ts b/src/livecodes/storage/storage.ts
index d77f53857e..50e4ad66b0 100644
--- a/src/livecodes/storage/storage.ts
+++ b/src/livecodes/storage/storage.ts
@@ -1,8 +1,8 @@
-import { localforageUrl } from '../vendors';
 import { createPub } from '../events';
 import { loadScript } from '../utils/utils';
-import type { Storage, StoreName } from './models';
+import { localforageUrl } from '../vendors';
 import { fakeStorage } from './fake-storage';
+import type { Storage, StoreName } from './models';
 
 type LocalForage = typeof import('localforage');
 let localforage: LocalForage;
diff --git a/src/livecodes/storage/stores.ts b/src/livecodes/storage/stores.ts
index 68cacb858e..8d60e2f48b 100644
--- a/src/livecodes/storage/stores.ts
+++ b/src/livecodes/storage/stores.ts
@@ -1,8 +1,8 @@
 import { cloneObject } from '../utils/utils';
+import type { ProjectStorage, SimpleStorage, Storage, Stores } from './models';
 import { createProjectStorage } from './project-storage';
 import { createSimpleStorage } from './simple-storage';
 import { createStorage } from './storage';
-import type { Storage, ProjectStorage, SimpleStorage, Stores } from './models';
 
 export const createStores = (): Stores =>
   cloneObject({
diff --git a/src/livecodes/sync/diff.ts b/src/livecodes/sync/diff.ts
index ea2e8ae8a4..baa5cc2afd 100644
--- a/src/livecodes/sync/diff.ts
+++ b/src/livecodes/sync/diff.ts
@@ -1,7 +1,7 @@
-import * as Y from 'yjs';
 import * as DeepDiff from 'deep-diff';
+import * as Y from 'yjs';
 
-export { Y, DeepDiff };
+export { DeepDiff, Y };
 
 export function toJSON<T>(source: unknown): T {
   if (source instanceof Y.AbstractType) {
diff --git a/src/livecodes/sync/index.ts b/src/livecodes/sync/index.ts
index af26861042..fd3749a48f 100644
--- a/src/livecodes/sync/index.ts
+++ b/src/livecodes/sync/index.ts
@@ -1,3 +1,3 @@
 export * from './diff';
-export * from './sync';
 export type * from './models';
+export * from './sync';
diff --git a/src/livecodes/sync/sync.ts b/src/livecodes/sync/sync.ts
index fe859b2b53..3e1efd51a3 100644
--- a/src/livecodes/sync/sync.ts
+++ b/src/livecodes/sync/sync.ts
@@ -1,14 +1,14 @@
-import { createStores, initializeSimpleStores, type Stores } from '../storage';
+import type { WorkerMessageEvent } from '../models';
 import { getAppCDN } from '../services/modules';
+import { createStores, initializeSimpleStores, type Stores } from '../storage';
 import { callWorker } from '../utils/utils';
-import type { WorkerMessageEvent } from '../models';
 import type { SyncMessageEvent } from './models';
 import type {
-  workerSync,
-  workerExportToLocalSync,
   workerExportStoreAsBase64Update,
-  workerRestoreFromUpdate,
+  workerExportToLocalSync,
   workerRestoreFromLocalSync,
+  workerRestoreFromUpdate,
+  workerSync,
 } from './sync.worker';
 
 type SyncMethod = SyncMessageEvent['data']['method'];
diff --git a/src/livecodes/sync/sync.worker.ts b/src/livecodes/sync/sync.worker.ts
index 9a38e0d9e1..1e2703d39b 100644
--- a/src/livecodes/sync/sync.worker.ts
+++ b/src/livecodes/sync/sync.worker.ts
@@ -1,10 +1,10 @@
 import type { User } from '../models';
-import type { Storage, SimpleStorage, ProjectStorage, Stores } from '../storage';
-import { createStores, getStoreKey, initializeStores } from '../storage/stores';
 import { commitFile, getContent, type GitHubFile } from '../services/github';
-import { callWorker, loadScript, typedArraysAreEqual, Uint8ArrayToBase64 } from '../utils/utils';
+import type { ProjectStorage, SimpleStorage, Storage, Stores } from '../storage';
+import { createStores, getStoreKey, initializeStores } from '../storage/stores';
+import { Uint8ArrayToBase64, callWorker, loadScript, typedArraysAreEqual } from '../utils/utils';
 import { jsZipUrl } from '../vendors';
-import { Y, DeepDiff, applyChange, toJSON } from './diff';
+import { DeepDiff, Y, applyChange, toJSON } from './diff';
 import type { StoredSyncData, SyncMessageEvent } from './models';
 
 const storesToSync: Array<keyof Stores> = ['projects', 'templates', 'assets', 'snippets'];
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 15e73fec42..1075d26834 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -7,66 +7,66 @@ import { backboneStarter } from './backbone-starter';
 import { blank } from './blank';
 import { blocklyStarter } from './blockly-starter';
 import { bootstrapStarter } from './bootstrap-starter';
+import { civetStarter } from './civet-starter';
+import { clioStarter } from './clio-starter';
+import { clojurescriptStarter } from './clojurescript-starter';
 import { coffeescriptStarter } from './coffeescript-starter';
+import { commonlispStarter } from './commonlisp-starter';
+import { cppStarter } from './cpp-starter';
+import { cppWasmStarter } from './cpp-wasm-starter';
+import { csharpWasmStarter } from './csharp-wasm-starter';
+import { d3Starter } from './d3-starter';
+import { daisyuiStarter } from './daisyui-starter';
+import { diagramsStarter } from './diagrams-starter';
+import { fennelStarter } from './fennel-starter';
+import { gleamStarter } from './gleam-starter';
 import { goStarter } from './go-starter';
+import { imbaStarter } from './imba-starter';
+import { javaStarter } from './java-starter';
+import { javascriptStarter } from './javascript-starter';
+import { jestReactStarter } from './jest-react-starter';
+import { jestStarter } from './jest-starter';
 import { jqueryStarter } from './jquery-starter';
+import { juliaStarter } from './julia-starter';
 import { knockoutStarter } from './knockout-starter';
+import { litStarter } from './lit-starter';
 import { livescriptStarter } from './livescript-starter';
 import { luaStarter } from './lua-starter';
+import { luaWasmStarter } from './lua-wasm-starter';
+import { malinaStarter } from './malina-starter';
+import { markdownStarter } from './markdown-starter';
 import { mdxStarter } from './mdx-starter';
+import { ocamlStarter } from './ocaml-starter';
 import { perlStarter } from './perl-starter';
+import { phaserStarter } from './phaser-starter';
 import { phpStarter } from './php-starter';
+import { phpWasmStarter } from './php-wasm-starter';
+import { postgresqlStarter } from './postgresql-starter';
 import { preactStarter } from './preact-starter';
-import { pythonWasmStarter } from './python-wasm-starter';
+import { prologStarter } from './prolog-starter';
 import { pythonStarter } from './python-starter';
+import { pythonWasmStarter } from './python-wasm-starter';
+import { rStarter } from './r-starter';
 import { reactNativeStarter } from './react-native-starter';
 import { reactStarter } from './react-starter';
-import { markdownStarter } from './markdown-starter';
-import { rescriptStarter } from './rescript-starter';
 import { reasonStarter } from './reason-starter';
-import { ocamlStarter } from './ocaml-starter';
+import { rescriptStarter } from './rescript-starter';
 import { riotStarter } from './riot-starter';
 import { rubyStarter } from './ruby-starter';
+import { rubyWasmStarter } from './ruby-wasm-starter';
 import { schemeStarter } from './scheme-starter';
+import { shadcnuiStarter } from './shadcn-ui-starter';
 import { solidStarter } from './solid-starter';
 import { sqlStarter } from './sql-starter';
 import { stencilStarter } from './stencil-starter';
 import { svelteStarter } from './svelte-starter';
 import { tailwindcssStarter } from './tailwindcss-starter';
+import { tclStarter } from './tcl-starter';
+import { tealStarter } from './teal-starter';
 import { typescriptStarter } from './typescript-starter';
 import { vueSfcStarter } from './vue-sfc-starter';
 import { vue2Starter } from './vue2-starter';
 import { watStarter } from './wat-starter';
-import { malinaStarter } from './malina-starter';
-import { commonlispStarter } from './commonlisp-starter';
-import { cppStarter } from './cpp-starter';
-import { juliaStarter } from './julia-starter';
-import { cppWasmStarter } from './cpp-wasm-starter';
-import { tclStarter } from './tcl-starter';
-import { prologStarter } from './prolog-starter';
-import { clioStarter } from './clio-starter';
-import { diagramsStarter } from './diagrams-starter';
-import { imbaStarter } from './imba-starter';
-import { jestStarter } from './jest-starter';
-import { jestReactStarter } from './jest-react-starter';
-import { javascriptStarter } from './javascript-starter';
-import { rStarter } from './r-starter';
-import { civetStarter } from './civet-starter';
-import { fennelStarter } from './fennel-starter';
-import { tealStarter } from './teal-starter';
-import { clojurescriptStarter } from './clojurescript-starter';
-import { rubyWasmStarter } from './ruby-wasm-starter';
-import { luaWasmStarter } from './lua-wasm-starter';
-import { phpWasmStarter } from './php-wasm-starter';
-import { litStarter } from './lit-starter';
-import { postgresqlStarter } from './postgresql-starter';
-import { gleamStarter } from './gleam-starter';
-import { phaserStarter } from './phaser-starter';
-import { d3Starter } from './d3-starter';
-import { shadcnuiStarter } from './shadcn-ui-starter';
-import { daisyuiStarter } from './daisyui-starter';
-import { javaStarter } from './java-starter';
-import { csharpWasmStarter } from './csharp-wasm-starter';
 
 export const starterTemplates = [
   blank,
diff --git a/src/livecodes/toolspane/compiled-code-viewer.ts b/src/livecodes/toolspane/compiled-code-viewer.ts
index 5eacb44f8a..5382f00b04 100644
--- a/src/livecodes/toolspane/compiled-code-viewer.ts
+++ b/src/livecodes/toolspane/compiled-code-viewer.ts
@@ -2,13 +2,13 @@ import { getEditorConfig } from '../config';
 import { createEditor, getFontFamily } from '../editor';
 import { getLanguageExtension, languages, mapLanguage } from '../languages';
 import type {
-  Editors,
-  Config,
   CodeEditor,
-  EditorOptions,
-  Language,
   CompiledCodeViewer,
+  Config,
+  EditorOptions,
+  Editors,
   EventsManager,
+  Language,
 } from '../models';
 import { getToolspaneButtons, getToolspaneElement } from '../UI';
 
diff --git a/src/livecodes/toolspane/console.ts b/src/livecodes/toolspane/console.ts
index 94e1fcdbd9..e793e030d7 100644
--- a/src/livecodes/toolspane/console.ts
+++ b/src/livecodes/toolspane/console.ts
@@ -1,19 +1,19 @@
 import LunaConsole from 'luna-console';
+import { getToolspaneButtons, getToolspaneElement, getToolspaneTitles } from '../UI';
+import { getEditorConfig } from '../config';
 import { createEditor, getFontFamily } from '../editor';
+import { getLanguageExtension, mapLanguage } from '../languages';
 import type {
-  Editors,
+  CodeEditor,
   Config,
   Console,
-  CodeEditor,
   EditorOptions,
-  Theme,
+  Editors,
   EventsManager,
+  Theme,
 } from '../models';
-import { isMobile, preventFocus } from '../utils';
 import { sandboxService } from '../services';
-import { getToolspaneButtons, getToolspaneElement, getToolspaneTitles } from '../UI';
-import { getLanguageExtension, mapLanguage } from '../languages';
-import { getEditorConfig } from '../config';
+import { isMobile, preventFocus } from '../utils';
 
 export const createConsole = (
   config: Config,
diff --git a/src/livecodes/toolspane/tools.ts b/src/livecodes/toolspane/tools.ts
index f5a69a87f8..fdda7d78b3 100644
--- a/src/livecodes/toolspane/tools.ts
+++ b/src/livecodes/toolspane/tools.ts
@@ -1,14 +1,14 @@
 import Split from 'split.js';
+import { getResultElement, getToolspaneBar } from '../UI';
 import type {
-  Editors,
   Config,
-  ToolList,
-  ToolsPaneStatus,
+  Editors,
   EventsManager,
-  ToolsPane,
   Tool,
+  ToolList,
+  ToolsPane,
+  ToolsPaneStatus,
 } from '../models';
-import { getResultElement, getToolspaneBar } from '../UI';
 import { evaluateCssCalc } from '../utils';
 import { createCompiledCodeViewer } from './compiled-code-viewer';
 import { createConsole } from './console';
@@ -93,7 +93,7 @@ export const createToolsPane = (
 
   const setHidden = (hide: boolean) => {
     if (hide) {
-      toolsSplit.collapse(1);
+      toolsSplit.setSizes(sizes.none);
       result.style.minHeight = '100%';
     } else {
       result.style.minHeight = 'unset';
@@ -162,7 +162,7 @@ export const createToolsPane = (
 
   const open = (toolId: number, maximize = false) => {
     if (maximize) {
-      toolsSplit.collapse(0);
+      toolsSplit.setSizes(sizes.full);
       status = 'full';
     } else {
       toolsSplit.setSizes(sizes.open);
@@ -173,7 +173,7 @@ export const createToolsPane = (
   };
 
   const close = () => {
-    toolsSplit.collapse(1);
+    toolsSplit.setSizes(sizes.closed);
     status = 'closed';
     sizeChanged();
     tools.forEach((tool) => tool.onDeactivate());
diff --git a/src/livecodes/types/index.ts b/src/livecodes/types/index.ts
index 2167051652..2122285466 100644
--- a/src/livecodes/types/index.ts
+++ b/src/livecodes/types/index.ts
@@ -1,2 +1,2 @@
-export * from './type-loader';
 export * from './default-types';
+export * from './type-loader';
diff --git a/src/livecodes/types/type-loader.ts b/src/livecodes/types/type-loader.ts
index 8834a6d391..4512190145 100644
--- a/src/livecodes/types/type-loader.ts
+++ b/src/livecodes/types/type-loader.ts
@@ -1,5 +1,5 @@
-import type { EditorLibrary, Types } from '../models';
 import { getImports, hasUrlImportsOrExports } from '../compiler/import-map';
+import type { EditorLibrary, Types } from '../models';
 import { typesService } from '../services/types';
 import { objectFilter } from '../utils/utils';
 
diff --git a/src/livecodes/utils/__tests__/utils.spec.ts b/src/livecodes/utils/__tests__/utils.spec.ts
index e4a1362a5a..1b4228fa5c 100644
--- a/src/livecodes/utils/__tests__/utils.spec.ts
+++ b/src/livecodes/utils/__tests__/utils.spec.ts
@@ -1,6 +1,6 @@
 import { debounce, decodeHTML, encodeHTML, safeName, toCamelCase } from '..';
-import { compress, decompress } from '../compression';
 import { defaultConfig } from '../../config';
+import { compress, decompress } from '../compression';
 
 describe('utils', () => {
   test('debounce', async () => {
diff --git a/src/livecodes/utils/compression.ts b/src/livecodes/utils/compression.ts
index e0d1e3eb20..944f260bed 100644
--- a/src/livecodes/utils/compression.ts
+++ b/src/livecodes/utils/compression.ts
@@ -1,7 +1,7 @@
 import {
   compressToEncodedURIComponent,
-  decompressFromEncodedURIComponent,
   decompressFromBase64,
+  decompressFromEncodedURIComponent,
 } from 'lz-string';
 
 export const compress = compressToEncodedURIComponent;
diff --git a/src/livecodes/utils/index.ts b/src/livecodes/utils/index.ts
index 9369a53863..661fbe6788 100644
--- a/src/livecodes/utils/index.ts
+++ b/src/livecodes/utils/index.ts
@@ -1,2 +1,2 @@
-export * from './utils';
 export * from './get-import-instance';
+export * from './utils';
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 7944cc5495..518bca4a05 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -617,6 +617,32 @@ export const isFocusable = /* @__PURE__ */ (item: any | null): boolean => {
   }
 };
 
+/**
+ * Compares two objects and returns a list of keys of source object
+ * whose values are different from the destination object.
+ */
+export const compareObjects = /* @__PURE__ */ (
+  srcObj: Record<string, unknown>,
+  dstObj: Record<string, unknown>,
+) => {
+  const diff: string[] = [];
+  for (const key of Object.keys(srcObj)) {
+    if (typeof srcObj[key] === 'function') {
+      continue;
+    } else if (!(key in dstObj)) {
+      diff.push(key);
+    } else if (srcObj[key] !== null && typeof srcObj[key] === 'object') {
+      const objDiff = compareObjects(srcObj[key] as any, dstObj[key] as any).map(
+        (k) => `${key}.${k}`,
+      );
+      diff.push(...objDiff);
+    } else if (srcObj[key] !== dstObj[key]) {
+      diff.push(key);
+    }
+  }
+  return diff;
+};
+
 export const predefinedValues = {
   APP_VERSION: process.env.VERSION || '',
   SDK_VERSION: process.env.SDK_VERSION || '',
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0991421d42..f267202513 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -3,7 +3,7 @@ import { modulesService } from './services/modules';
 const { getUrl, getModuleUrl } = modulesService;
 
 export const vendorsBaseUrl = // 'http://127.0.0.1:8081/';
-  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.22.1/dist/');
+  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.22.3/dist/');
 
 export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');
 
diff --git a/src/netlify.toml b/src/netlify.toml
new file mode 100644
index 0000000000..51d507f223
--- /dev/null
+++ b/src/netlify.toml
@@ -0,0 +1,4 @@
+[[headers]]
+  for = "/*"
+  [headers.values]
+    access-control-allow-origin = "*"
diff --git a/src/sdk/__tests__/getPlaygroundUrl.test.ts b/src/sdk/__tests__/getPlaygroundUrl.test.ts
new file mode 100644
index 0000000000..fa41bd8c2d
--- /dev/null
+++ b/src/sdk/__tests__/getPlaygroundUrl.test.ts
@@ -0,0 +1,128 @@
+import { compressToEncodedURIComponent } from 'lz-string';
+import { getPlaygroundUrl } from '../index';
+import type { Config, EmbedOptions, UrlQueryParams } from '../models';
+
+test('empty options object', () => {
+  const url = new URL(getPlaygroundUrl());
+  const searchParams = url.search;
+  expect(searchParams.toString()).toBe('');
+
+  const hashParams = url.hash;
+  expect(hashParams).toBe('');
+});
+
+test('passing some params, they should be stored in hash params', () => {
+  const params = {
+    param1: 1,
+    param2: 2,
+  };
+  const url = new URL(getPlaygroundUrl({ params: params as UrlQueryParams }));
+  const searchParams = url.searchParams;
+  const receivedParams = searchParams.get('params');
+  expect(receivedParams).toBeNull();
+
+  const hashParams = new URLSearchParams(url.hash.slice(1));
+  expect(hashParams).not.toBeNull();
+  expect(hashParams.get('params')).toBe(compressToEncodedURIComponent(JSON.stringify(params)));
+});
+
+test('appUrl', () => {
+  const url = getPlaygroundUrl({ appUrl: 'https://example.com' });
+  expect(url).toBe(new URL(url).href);
+});
+
+test('headless and appUrl', () => {
+  const appUrl = 'https://example.com';
+  const url = getPlaygroundUrl({ appUrl, headless: true });
+  expect(url).toMatch(`${new URL(appUrl).href}`);
+  expect(new URL(url).searchParams.get('headless')).toBe('true');
+});
+
+test('template', () => {
+  const url = getPlaygroundUrl({
+    template: 'react',
+  });
+  expect(new URL(url).searchParams.get('template')).toBe('react');
+});
+
+test('empty config object should return appUrl', () => {
+  const appUrl = 'https://example.com';
+  const url = new URL(
+    getPlaygroundUrl({
+      appUrl,
+      config: {},
+    }),
+  );
+  expect(url.href).toMatch(`${new URL(appUrl).href}`);
+  const hashParams = url.hash;
+  expect(hashParams).toBe('');
+});
+
+test('non-empty config object stores compressed config in config hashParam', () => {
+  const config: Partial<Config> = {
+    view: 'split',
+  };
+  const appUrl = 'https://example.com';
+  const url = new URL(
+    getPlaygroundUrl({
+      appUrl,
+      config,
+    }),
+  );
+  expect(url.href).toMatch(`${new URL(appUrl).href}`);
+  const hashParams = url.hash;
+  expect(hashParams).not.toBe('');
+  expect(new URLSearchParams(hashParams.slice(1)).get('config')).toBe(
+    'code/' + compressToEncodedURIComponent(JSON.stringify(config)),
+  );
+});
+
+test('deprecated options like lite and view update the config object stored in hash', () => {
+  const url = new URL(getPlaygroundUrl({ lite: true, view: 'result' }));
+  const searchParams = url.searchParams;
+  expect(searchParams.get('lite')).toBeNull();
+  expect(searchParams.get('view')).toBeNull();
+
+  const hashParams = new URLSearchParams(url.hash.slice(1));
+  expect(hashParams.get('config')).toBe(
+    'code/' + compressToEncodedURIComponent(JSON.stringify({ mode: 'lite', view: 'result' })),
+  );
+});
+
+test('all non-deprecated fields defined', () => {
+  const options: EmbedOptions = {
+    appUrl: 'https://example.com',
+    params: { title: 'example title', description: 'this is a project description' },
+    config: {
+      tags: ['tag1', 'tag2'],
+      markup: {
+        language: 'markdown',
+        content: '#this is md code',
+      },
+      activeEditor: 'markup',
+    },
+    headless: true,
+    import: 'id/8k6vbxitvb9',
+    loading: 'eager',
+    template: 'blank',
+  };
+  const url = new URL(getPlaygroundUrl(options));
+
+  // Check base URL
+  expect(url.href).toMatch(`${new URL(options.appUrl!).href}`);
+
+  // Check search params
+  expect(url.searchParams.get('headless')).toBe('true');
+  expect(url.searchParams.get('loading')).toBe('eager');
+  expect(url.searchParams.get('template')).toBe('blank');
+  expect(url.searchParams.get('x')).toBe(encodeURIComponent('id/8k6vbxitvb9'));
+
+  // Check hash params
+  const hashParams = new URLSearchParams(url.hash.slice(1));
+  expect(hashParams.get('params')).toBe(
+    compressToEncodedURIComponent(JSON.stringify(options.params)),
+  );
+  expect(hashParams.get('config')).toBe(
+    'code/' + compressToEncodedURIComponent(JSON.stringify(options.config)),
+  );
+});
diff --git a/src/sdk/index.ts b/src/sdk/index.ts
index a710730a91..ccfc14fe21 100644
--- a/src/sdk/index.ts
+++ b/src/sdk/index.ts
@@ -4,13 +4,13 @@ import type {
   API,
   Code,
   Config,
+  CustomEvents,
   EmbedOptions,
   Language,
   Playground,
-  UrlQueryParams,
-  CustomEvents,
   SDKEvent,
   SDKEventHandler,
+  UrlQueryParams,
 } from './models';
 
 export type { Code, Config, EmbedOptions, Language, Playground };
@@ -38,27 +38,17 @@ export async function createPlayground(
   if (
     typeof container === 'object' &&
     !(container instanceof HTMLElement) &&
-    (container as any).view === 'headless'
+    ((container as any).headless || (container as any).view === 'headless')
   ) {
     options = container;
     container = null as any;
   }
 
-  const {
-    appUrl = 'https://livecodes.io/',
-    params = {},
-    config = {},
-    import: importFrom,
-    headless,
-    lite,
-    loading = 'lazy',
-    template,
-    view,
-  } = options;
-
+  const { config = {}, headless, loading = 'lazy', view } = options;
   const isHeadless = headless || view === 'headless'; // for backwards compatibility;
 
   let containerElement: HTMLElement | null = null;
+  let appVersion: number | null = null;
 
   if (typeof container === 'string') {
     containerElement = document.querySelector(container);
@@ -77,73 +67,30 @@ export async function createPlayground(
     }
   }
 
-  let url: URL;
-  try {
-    url = new URL(appUrl);
-  } catch {
-    throw new Error(`"${appUrl}" is not a valid URL.`);
-  }
+  const playgroundUrl = new URL(getPlaygroundUrl(options));
+  const origin = playgroundUrl.origin;
+  playgroundUrl.searchParams.set('embed', 'true');
+  playgroundUrl.searchParams.set('loading', isHeadless ? 'eager' : loading);
 
-  const origin = url.origin;
+  const process = (globalThis as any).process; // avoid failing in docs & storybook
+  playgroundUrl.searchParams.set('sdkVersion', process?.env?.SDK_VERSION || 'latest');
 
-  if (params && typeof params === 'object') {
-    try {
-      url.searchParams.set('params', compressToEncodedURIComponent(JSON.stringify(params)));
-    } catch {
-      (Object.keys(params) as Array<keyof UrlQueryParams>).forEach((param) => {
-        url.searchParams.set(param, encodeURIComponent(String(params[param])));
-      });
-    }
-  }
-  if (template) {
-    url.searchParams.set('template', template);
-  }
-  if (importFrom) {
-    url.searchParams.set('x', encodeURIComponent(importFrom));
-  }
-  if (isHeadless) {
-    url.searchParams.set('headless', 'true');
-  }
-  if (lite) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `Deprecation notice: "lite" option is deprecated. Use "config: { mode: 'lite' }" instead.`,
-    );
-    if (typeof config === 'object' && config.mode == null) {
-      config.mode = 'lite';
-    } else {
-      url.searchParams.set('lite', 'true');
-    }
-  }
-  if (view) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".`,
-    );
-    if (typeof config === 'object' && config.view == null && view !== 'headless') {
-      config.view = view;
-    } else {
-      url.searchParams.set('view', view);
-    }
+  // for backward-compatibility
+  if (typeof config === 'object' && Object.keys(config).length > 0) {
+    playgroundUrl.searchParams.set('config', 'sdk');
   }
-  if (typeof config === 'string') {
-    try {
-      new URL(config);
-      url.searchParams.set('config', encodeURIComponent(config));
-    } catch {
-      throw new Error(`"config" is not a valid URL or configuration object.`);
-    }
-  } else if (typeof config === 'object') {
-    if (Object.keys(config).length > 0) {
-      url.searchParams.set('config', 'sdk');
-    }
-  } else {
-    throw new Error(`"config" is not a valid URL or configuration object.`);
+  // for backward-compatibility
+  const params = options.params;
+  if (
+    typeof params === 'object' &&
+    Object.keys(params).length > 0 &&
+    JSON.stringify(params).length < 1800
+  ) {
+    (Object.keys(params) as Array<keyof UrlQueryParams>).forEach((param) => {
+      playgroundUrl.searchParams.set(param, encodeURIComponent(String(params[param])));
+    });
   }
 
-  url.searchParams.set('embed', 'true');
-  url.searchParams.set('loading', isHeadless ? 'eager' : loading);
-
   let destroyed = false;
   const alreadyDestroyedMessage = 'Cannot call API methods after calling `destroy()`.';
 
@@ -201,22 +148,42 @@ export async function createPlayground(
       }
       addEventListener(
         'message',
-        function configHandler(e: MessageEventInit<{ type: CustomEvents['getConfig'] }>) {
+        function initHandler(
+          e: MessageEventInit<{ type: CustomEvents['init']; payload: { appVersion: string } }>,
+        ) {
           if (
             e.source !== frame.contentWindow ||
             e.origin !== origin ||
-            e.data?.type !== 'livecodes-get-config'
+            e.data?.type !== 'livecodes-init'
           ) {
             return;
           }
-          removeEventListener('message', configHandler);
-          frame.contentWindow?.postMessage({ type: 'livecodes-config', payload: config }, origin);
+          removeEventListener('message', initHandler);
+          appVersion = Number(e.data.payload.appVersion.replace(/^v/, ''));
         },
       );
+
+      // for backward-compatibility
+      if (!appVersion || appVersion < 46) {
+        addEventListener(
+          'message',
+          function configHandler(e: MessageEventInit<{ type: CustomEvents['getConfig'] }>) {
+            if (
+              e.source !== frame.contentWindow ||
+              e.origin !== origin ||
+              e.data?.type !== 'livecodes-get-config'
+            ) {
+              return;
+            }
+            removeEventListener('message', configHandler);
+            frame.contentWindow?.postMessage({ type: 'livecodes-config', payload: config }, origin);
+          },
+        );
+      }
       frame.onload = () => {
         resolve(frame);
       };
-      frame.src = url.href;
+      frame.src = playgroundUrl.href;
       if (!preExistingIframe) {
         containerElement.appendChild(frame);
       }
@@ -417,72 +384,137 @@ export async function createPlayground(
  *
  * @param {EmbedOptions} options - The [options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground.
  * @return {string} - The URL of the playground (as a string).
+ *
+ * large objects like config and params are store in the url hash params while the rest are in the search params
+ * unless config is a string in which case it is stored in searchParams
  */
 export function getPlaygroundUrl(options: EmbedOptions = {}): string {
-  const { appUrl, params, config, import: x, ...otherOptions } = options;
-  const configParam =
-    typeof config === 'string'
-      ? { config }
-      : config && typeof config === 'object' && Object.keys(config).length
-        ? { x: 'code/' + compressToEncodedURIComponent(JSON.stringify(config)) }
-        : {};
-
-  let encodedParams;
-  if (params && typeof params === 'object') {
+  const {
+    appUrl = 'https://livecodes.io',
+    params = {},
+    config = {},
+    headless,
+    import: importId,
+    lite,
+    view,
+    ...otherOptions
+  } = options;
+
+  let playgroundUrl: URL;
+  try {
+    playgroundUrl = new URL(appUrl);
+  } catch {
+    throw new Error(`${appUrl} is not a valid URL.`);
+  }
+
+  const hashParams = new URLSearchParams();
+
+  // Add other options to search params
+  Object.entries(otherOptions).forEach(([key, value]) => {
+    if (value !== undefined) {
+      playgroundUrl.searchParams.set(key, String(value));
+    }
+  });
+
+  const isHeadless = options.view === 'headless' || headless; // for backwards compatibility;
+
+  if (lite) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Deprecation notice: "lite" option is deprecated. Use "config: { mode: 'lite' }" instead.`,
+    );
+    if (typeof config === 'object' && config.mode == null) {
+      config.mode = 'lite';
+    } else {
+      playgroundUrl.searchParams.set('lite', 'true');
+    }
+  }
+
+  if (view) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".`,
+    );
+    if (typeof config === 'object' && config.view == null && view !== 'headless') {
+      config.view = view;
+    } else {
+      playgroundUrl.searchParams.set('view', view);
+    }
+  }
+
+  if (typeof config === 'string') {
+    try {
+      new URL(config);
+      playgroundUrl.searchParams.set('config', encodeURIComponent(config));
+    } catch {
+      throw new Error(`"config" is not a valid URL or configuration object.`);
+    }
+  } else if (config && typeof config === 'object' && Object.keys(config).length > 0) {
+    if (config.title && config.title !== 'Untitled Project') {
+      playgroundUrl.searchParams.set('title', config.title);
+    }
+    if (config.description && config.description.length > 0) {
+      playgroundUrl.searchParams.set('description', config.description);
+    }
+    hashParams.set('config', 'code/' + compressToEncodedURIComponent(JSON.stringify(config)));
+  }
+
+  // handle params
+  if (params && typeof params === 'object' && Object.keys(params).length > 0) {
     try {
-      encodedParams = compressToEncodedURIComponent(JSON.stringify(params));
+      hashParams.set('params', compressToEncodedURIComponent(JSON.stringify(params)));
     } catch {
       (Object.keys(params) as Array<keyof UrlQueryParams>).forEach((param) => {
-        (params as any)[param] = encodeURIComponent(String(params[param]));
+        playgroundUrl.searchParams.set(param, encodeURIComponent(String(params[param])));
       });
     }
   }
 
-  const allParams = new URLSearchParams(
-    JSON.parse(
-      JSON.stringify({
-        ...otherOptions,
-        ...(encodedParams ? { params: encodedParams } : params),
-        ...{ x },
-        ...configParam,
-      }),
-    ),
-  ).toString();
-  return (appUrl || 'https://livecodes.io') + (allParams ? '?' + allParams : '');
+  if (importId) {
+    playgroundUrl.searchParams.set('x', encodeURIComponent(importId));
+  }
+  if (isHeadless) {
+    playgroundUrl.searchParams.set('headless', 'true');
+  }
+
+  playgroundUrl.hash = hashParams.toString();
+  return playgroundUrl.href;
 }
 
-if (
-  globalThis.document && // to escape SSG in docusaurus
-  document.currentScript &&
-  'prefill' in document.currentScript?.dataset
-) {
-  window.addEventListener('load', () => {
-    document.querySelectorAll<HTMLElement>('.livecodes').forEach((codeblock) => {
-      let options: EmbedOptions | undefined;
-      const optionsStr = codeblock.dataset.options;
-      if (optionsStr) {
-        try {
-          options = JSON.parse(optionsStr);
-        } catch {
-          //
+/* @__PURE__ */ (() => {
+  if (
+    globalThis.document && // to escape SSG in docusaurus
+    document.currentScript &&
+    'prefill' in document.currentScript?.dataset
+  ) {
+    window.addEventListener('load', () => {
+      document.querySelectorAll<HTMLElement>('.livecodes').forEach((codeblock) => {
+        let options: EmbedOptions | undefined;
+        const optionsStr = codeblock.dataset.options;
+        if (optionsStr) {
+          try {
+            options = JSON.parse(optionsStr);
+          } catch {
+            //
+          }
         }
-      }
-      let config: Config | undefined;
-      const configStr = codeblock.dataset.config || codeblock.dataset.prefill;
-      if (configStr) {
-        try {
-          config = JSON.parse(configStr);
-        } catch {
-          //
+        let config: Config | undefined;
+        const configStr = codeblock.dataset.config || codeblock.dataset.prefill;
+        if (configStr) {
+          try {
+            config = JSON.parse(configStr);
+          } catch {
+            //
+          }
         }
-      }
-      const dom = encodeURIComponent(codeblock.outerHTML);
-      codeblock.innerHTML = '';
-      createPlayground(codeblock, {
-        import: 'dom/' + dom,
-        ...options,
-        ...(config ? { config } : {}),
+        const dom = encodeURIComponent(codeblock.outerHTML);
+        codeblock.innerHTML = '';
+        createPlayground(codeblock, {
+          import: 'dom/' + dom,
+          ...options,
+          ...(config ? { config } : {}),
+        });
       });
     });
-  });
-}
+  }
+})();
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 9c9a2173a4..013ccbce1b 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -911,6 +911,7 @@ export type Language =
   | 'vto'
   | 'art-template'
   | 'art'
+  | 'jinja'
   | 'bbcode'
   | 'bb'
   | 'mjml'
@@ -2002,6 +2003,7 @@ export type UrlQueryParams = Partial<
     Pick<Screen, 'screen'> & { new: '' } & { [key in Language]: string } & {
       [key in languageSelector]: string;
     } & {
+      sdkVersion: string;
       config: string;
       embed: boolean;
       preview: boolean;
@@ -2028,7 +2030,10 @@ export type UrlQueryParams = Partial<
 >;
 
 export interface CustomEvents {
+  init: 'livecodes-init';
+  /** @deprecated config is sent in hash params */
   getConfig: 'livecodes-get-config';
+  /** @deprecated config is sent in hash params */
   config: 'livecodes-config';
   load: 'livecodes-load';
   appLoaded: 'livecodes-app-loaded';
diff --git a/src/sdk/package.sdk.json b/src/sdk/package.sdk.json
index de602aaa81..ae6c23a846 100644
--- a/src/sdk/package.sdk.json
+++ b/src/sdk/package.sdk.json
@@ -1,10 +1,10 @@
 {
   "name": "livecodes",
-  "version": "0.10.0",
-  "description": "Code Playground That Just Works!",
+  "version": "0.11.0",
+  "description": "A Code Playground That Just Works!",
   "author": "Hatem Hosny",
   "license": "MIT",
-  "keywords": ["playground", "code", "client", "sdk", "react", "vue", "svelte", "solid", "python"],
+  "keywords": ["playground", "code", "repl", "client", "sdk", "react", "vue", "svelte", "python"],
   "private": false,
   "repository": {
     "url": "https://github.com/live-codes/livecodes"
diff --git a/src/sdk/react.tsx b/src/sdk/react.tsx
index 3108823d59..2cabdc458f 100644
--- a/src/sdk/react.tsx
+++ b/src/sdk/react.tsx
@@ -1,8 +1,9 @@
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import React, { useEffect, useRef, useState } from 'react';
-import type { EmbedOptions, Playground } from './models';
 import { createPlayground } from './index';
+// eslint-disable-next-line import/order
+import type { EmbedOptions, Playground } from './models';
 
 export interface Props extends EmbedOptions {
   className?: string;
diff --git a/src/sdk/vue.ts b/src/sdk/vue.ts
index 56e1b9b464..312b7f98ce 100644
--- a/src/sdk/vue.ts
+++ b/src/sdk/vue.ts
@@ -4,10 +4,10 @@
 // '@vue/runtime-core' is used for generating type definitions,
 // and is replaced by external dependency 'vue' during build
 import type {
-  DefineComponent,
   AllowedComponentProps,
   ComponentCustomProps,
   ComponentOptionsMixin,
+  DefineComponent,
   ExtractPropTypes,
   RendererElement,
   RendererNode,
@@ -16,8 +16,9 @@ import type {
 } from '@vue/runtime-core';
 import { h, onMounted, onUnmounted, ref, watch } from '@vue/runtime-core';
 
-import type { Playground, EmbedOptions } from './models';
 import { createPlayground } from './index';
+// eslint-disable-next-line import/order
+import type { EmbedOptions, Playground } from './models';
 
 export interface Props extends EmbedOptions {
   height?: string;
diff --git a/storybook/src/create-story.ts b/storybook/src/create-story.ts
index 52963c00f9..ce3723a2ad 100644
--- a/storybook/src/create-story.ts
+++ b/storybook/src/create-story.ts
@@ -1,12 +1,11 @@
- 
 import type { ArgTypes, Story } from '@storybook/html';
 import { flatten, unflatten } from 'flat';
 
-import './deps';
 import { defaultConfig } from '../../src/livecodes/config/default-config';
-import { starterTemplates } from '../../src/livecodes/templates/starter';
 import { languages } from '../../src/livecodes/languages';
+import { starterTemplates } from '../../src/livecodes/templates/starter';
 import type { LiveCodesArgs } from './LiveCodes';
+import './deps';
 
 const delimiter = '__';
 
diff --git a/tsconfig.full.json b/tsconfig.full.json
index e0eed08a5c..062a317b34 100644
--- a/tsconfig.full.json
+++ b/tsconfig.full.json
@@ -1,4 +1,4 @@
 {
-    "extends": "./tsconfig.json",
-    "exclude": ["**/node_modules/**"]
-}
\ No newline at end of file
+  "extends": "./tsconfig.json",
+  "exclude": ["**/node_modules/**"]
+}
diff --git a/vendor-licenses.md b/vendor-licenses.md
index 1467de5a92..63e33f0201 100644
--- a/vendor-licenses.md
+++ b/vendor-licenses.md
@@ -104,6 +104,8 @@ Hint.css: [MIT License](https://github.com/chinchang/hint.css/blob/e4b0f0afc79fe
 
 hpcc-js/wasm: [Apache-2.0 license](https://github.com/hpcc-systems/hpcc-js-wasm/blob/58b1d7cc1ac1d7c6e42afd3ae70085425177d6e2/LICENSE)
 
+@huggingface/jinja: [MIT License](https://github.com/huggingface/huggingface.js/blob/70b41a6490d10e60e11cc75a378c6cb9a7409423/LICENSE)
+
 i18next: [MIT License](https://github.com/i18next/i18next/blob/v23.15.1/LICENSE)
 
 i18next-http-backend: [MIT License](https://github.com/i18next/i18next-http-backend/blob/v2.6.1/licence)