Skip to content

allow setting custom root element in flutter - #1065

Merged
hatemhosny merged 1 commit into
developfrom
flutter
Oct 11, 2026
Merged

hatemhosny merged 1 commit into
developfrom
flutter

Conversation

@hatemhosny

@hatemhosny hatemhosny commented Oct 10, 2026 •

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • New Features

    • Flutter apps can now render inside an existing livecodes-app element. If one isn’t present, the app creates a full-page drawing area automatically.
    • Flutter rendering starts when you run the app, and the drawing area uses the size of its container.
  • Documentation

    • Added guidance and an example for configuring a custom Flutter root element, including setting its dimensions.

@netlify

netlify Bot commented Oct 10, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for livecodes ready!

Name Link
🔨 Latest commit 261e3dd
🔍 Latest deploy log https://app.netlify.com/projects/livecodes/deploys/6acaad30f6bb2a000898e5dd
😎 Deploy Preview https://deploy-preview-1065--livecodes.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying livecodes with  Cloudflare Pages  Cloudflare Pages

Latest commit: 261e3dd
Status: ✅  Deploy successful!
Preview URL: https://143d33a4.livecodes.pages.dev
Branch Preview URL: https://flutter.livecodes.pages.dev

View logs

@sonarqubecloud

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown
Contributor

Size Change: 0 B

Total Size: 1.26 MB

ℹ️ View Unchanged
Filename Size Change
build/404.html 1.45 kB 0 B
build/app.html 250 B 0 B
build/index.html 1.57 kB -4 B (-0.25%)
build/livecodes/app.css 23.8 kB 0 B
build/livecodes/app.js 117 kB +87 B (+0.07%)
build/livecodes/assets.js 8.66 kB -3 B (-0.03%)
build/livecodes/assets/noop.js 18 B 0 B
build/livecodes/assets/templates/diagrams-starter.html 2.19 kB 0 B
build/livecodes/backup.js 3.74 kB +1 B (+0.03%)
build/livecodes/blockly.js 18.2 kB +11 B (+0.06%)
build/livecodes/broadcast.js 1.19 kB -1 B (-0.08%)
build/livecodes/bundle-types.js 4.4 kB 0 B
build/livecodes/code-to-image.js 11 kB -5 B (-0.05%)
build/livecodes/codejar.js 19.4 kB 0 B
build/livecodes/codemirror.js 20.3 kB -2 B (-0.01%)
build/livecodes/compile.page.js 2.47 kB 0 B
build/livecodes/compile.worker.js 18.5 kB -14 B (-0.08%)
build/livecodes/compiler-utils.js 3.92 kB +2 B (+0.05%)
build/livecodes/custom-editor-utils.js 198 B 0 B
build/livecodes/deploy.js 6.96 kB +4 B (+0.06%)
build/livecodes/editor-settings.js 25.1 kB +33 B (+0.13%)
build/livecodes/embed-ui.js 5.52 kB +8 B (+0.15%)
build/livecodes/embed.js 96.3 kB -79 B (-0.08%)
build/livecodes/export.js 3.92 kB 0 B
build/livecodes/firebase.js 22.7 kB 0 B
build/livecodes/format.worker.js 17.5 kB -75 B (-0.43%)
build/livecodes/google-fonts.js 7.12 kB 0 B
build/livecodes/headless.js 83.9 kB -65 B (-0.08%)
build/livecodes/i18n-ar-language-info.json 7.29 kB 0 B
build/livecodes/i18n-ar-translation.json 9.57 kB 0 B
build/livecodes/i18n-bn-language-info.json 7.82 kB 0 B
build/livecodes/i18n-bn-translation.json 9.95 kB 0 B
build/livecodes/i18n-de-language-info.json 7.33 kB 0 B
build/livecodes/i18n-de-translation.json 9.69 kB 0 B
build/livecodes/i18n-en-language-info.json 6.28 kB 0 B
build/livecodes/i18n-en-translation.json 8.3 kB 0 B
build/livecodes/i18n-es-language-info.json 6.93 kB 0 B
build/livecodes/i18n-es-translation.json 9.43 kB 0 B
build/livecodes/i18n-fa-language-info.json 7.51 kB 0 B
build/livecodes/i18n-fa-translation.json 9.78 kB 0 B
build/livecodes/i18n-fr-language-info.json 7.18 kB 0 B
build/livecodes/i18n-fr-translation.json 9.68 kB 0 B
build/livecodes/i18n-hi-language-info.json 8.01 kB 0 B
build/livecodes/i18n-hi-translation.json 10.2 kB 0 B
build/livecodes/i18n-hu-language-info.json 7.27 kB 0 B
build/livecodes/i18n-hu-translation.json 9.61 kB 0 B
build/livecodes/i18n-id-language-info.json 6.68 kB 0 B
build/livecodes/i18n-id-translation.json 8.93 kB 0 B
build/livecodes/i18n-it-language-info.json 7.03 kB 0 B
build/livecodes/i18n-it-translation.json 9.5 kB 0 B
build/livecodes/i18n-ja-language-info.json 7.72 kB 0 B
build/livecodes/i18n-ja-translation.json 9.88 kB 0 B
build/livecodes/i18n-nl-language-info.json 7.03 kB 0 B
build/livecodes/i18n-nl-translation.json 9.14 kB 0 B
build/livecodes/i18n-pt-language-info.json 6.96 kB 0 B
build/livecodes/i18n-pt-translation.json 9.62 kB 0 B
build/livecodes/i18n-ru-language-info.json 7.74 kB 0 B
build/livecodes/i18n-ru-translation.json 10.6 kB 0 B
build/livecodes/i18n-tr-language-info.json 7.14 kB 0 B
build/livecodes/i18n-tr-translation.json 9.51 kB 0 B
build/livecodes/i18n-ur-language-info.json 8.06 kB 0 B
build/livecodes/i18n-ur-translation.json 10.1 kB 0 B
build/livecodes/i18n-zh-CN-language-info.json 6.77 kB 0 B
build/livecodes/i18n-zh-CN-translation.json 8.94 kB 0 B
build/livecodes/i18n.js 20.4 kB -20 B (-0.1%)
build/livecodes/import-src.js 21.3 kB +11 B (+0.05%)
build/livecodes/import.js 19.5 kB -18 B (-0.09%)
build/livecodes/index.js 5.53 kB +3 B (+0.05%)
build/livecodes/lang-ada-wasm-script.js 3.53 kB 0 B
build/livecodes/lang-art-template-compiler.js 1.68 kB 0 B
build/livecodes/lang-assembly-wasm-script.js 3.6 kB 0 B
build/livecodes/lang-assemblyscript-compiler.js 290 B 0 B
build/livecodes/lang-assemblyscript-script.js 386 B 0 B
build/livecodes/lang-astro-compiler.js 2.37 kB 0 B
build/livecodes/lang-blazor-wasm-script.js 2.22 kB 0 B
build/livecodes/lang-clang-wasm-script.js 3.6 kB 0 B
build/livecodes/lang-clio-compiler.js 1.58 kB 0 B
build/livecodes/lang-cobol-wasm-script.js 3.72 kB 0 B
build/livecodes/lang-commonlisp-script.js 123 B 0 B
build/livecodes/lang-cpp-script.js 2.04 kB 0 B
build/livecodes/lang-crystal-wasm-script.js 3.84 kB 0 B
build/livecodes/lang-csharp-wasm-script.js 2.25 kB 0 B
build/livecodes/lang-d-wasm-script.js 3.66 kB 0 B
build/livecodes/lang-dart-compiler.js 1.83 kB 0 B
build/livecodes/lang-dart-script.js 1.65 kB +110 B (+7.12%) 🔍
build/livecodes/lang-diagrams-compiler-esm.js 5.14 kB 0 B
build/livecodes/lang-dot-compiler.js 1.72 kB 0 B
build/livecodes/lang-ejs-compiler.js 1.67 kB 0 B
build/livecodes/lang-elm-compiler.js 1.66 kB 0 B
build/livecodes/lang-eta-compiler.js 1.68 kB 0 B
build/livecodes/lang-fanak-script.js 2.45 kB 0 B
build/livecodes/lang-fennel-compiler.js 1.65 kB 0 B
build/livecodes/lang-flutter-script.js 1.65 kB +106 B (+6.85%) 🔍
build/livecodes/lang-fortran-wasm-script.js 3.56 kB 0 B
build/livecodes/lang-fsharp-compiler.js 802 B 0 B
build/livecodes/lang-fsharp-wasm-script.js 3.06 kB 0 B
build/livecodes/lang-gleam-compiler.js 3.13 kB 0 B
build/livecodes/lang-go-wasm-script.js 3.3 kB 0 B
build/livecodes/lang-haml-compiler.js 1.68 kB 0 B
build/livecodes/lang-handlebars-compiler.js 2.01 kB 0 B
build/livecodes/lang-haskell-script.js 1.91 kB 0 B
build/livecodes/lang-haskell-wasm-script.js 3.62 kB 0 B
build/livecodes/lang-imba-compiler.js 147 B 0 B
build/livecodes/lang-janet-wasm-script.js 3.71 kB 0 B
build/livecodes/lang-java-script.js 4.09 kB 0 B
build/livecodes/lang-jinja-compiler.js 1.68 kB 0 B
build/livecodes/lang-julia-script.js 3.32 kB 0 B
build/livecodes/lang-liquid-compiler.js 1.71 kB 0 B
build/livecodes/lang-lua-wasm-script.js 205 B 0 B
build/livecodes/lang-malina-compiler.js 3.65 kB -1 B (-0.03%)
build/livecodes/lang-markdown-compiler.js 1.7 kB 0 B
build/livecodes/lang-markdown-script.js 1.47 kB 0 B
build/livecodes/lang-minizinc-script.js 2.09 kB 0 B
build/livecodes/lang-mustache-compiler.js 1.67 kB 0 B
build/livecodes/lang-nim-wasm-script.js 3.95 kB 0 B
build/livecodes/lang-nunjucks-compiler.js 2.02 kB 0 B
build/livecodes/lang-pascal-compiler.js 1.6 kB 0 B
build/livecodes/lang-perl-script.js 268 B 0 B
build/livecodes/lang-php-wasm-script.js 347 B 0 B
build/livecodes/lang-postgresql-compiler-esm.js 1.76 kB 0 B
build/livecodes/lang-prolog-script.js 204 B 0 B
build/livecodes/lang-pug-compiler.js 371 B 0 B
build/livecodes/lang-python-wasm-script.js 1.89 kB 0 B
build/livecodes/lang-r-script-esm.js 2.47 kB 0 B
build/livecodes/lang-rescript-compiler-esm.js 2.19 kB 0 B
build/livecodes/lang-rescript-formatter.js 1.56 kB 0 B
build/livecodes/lang-riot-compiler.js 3.52 kB -3 B (-0.09%)
build/livecodes/lang-ruby-wasm-script.js 1.74 kB 0 B
build/livecodes/lang-rust-wasm-script.js 3.11 kB 0 B
build/livecodes/lang-scss-compiler.js 1.85 kB 0 B
build/livecodes/lang-solid-compiler.js 263 B 0 B
build/livecodes/lang-sql-compiler.js 1.66 kB 0 B
build/livecodes/lang-sql-script.js 2.07 kB 0 B
build/livecodes/lang-svelte-compiler.js 5.36 kB +5 B (+0.09%)
build/livecodes/lang-swift-wasm-script.js 2.11 kB 0 B
build/livecodes/lang-tcl-script.js 1.86 kB 0 B
build/livecodes/lang-teal-compiler.js 1.75 kB 0 B
build/livecodes/lang-twig-compiler.js 1.69 kB 0 B
build/livecodes/lang-v-wasm-script.js 3.72 kB 0 B
build/livecodes/lang-vb-wasm-script.js 3.52 kB 0 B
build/livecodes/lang-vento-compiler.js 1.72 kB 0 B
build/livecodes/lang-vue-compiler.js 6.75 kB +2 B (+0.03%)
build/livecodes/lang-vue2-compiler.js 4.17 kB -4 B (-0.1%)
build/livecodes/lang-wat-compiler.js 348 B 0 B
build/livecodes/lang-wat-script.js 1.98 kB 0 B
build/livecodes/lang-zig-wasm-script.js 5.15 kB 0 B
build/livecodes/language-info.js 10.7 kB -5 B (-0.05%)
build/livecodes/monaco.js 25.6 kB -10 B (-0.04%)
build/livecodes/open.js 6.25 kB +4 B (+0.06%)
build/livecodes/processor-lightningcss-compiler.js 1.91 kB 0 B
build/livecodes/processor-postcss-compiler.js 2.06 kB 0 B
build/livecodes/processor-tailwindcss-compiler.js 5.34 kB 0 B
build/livecodes/processor-unocss-compiler.js 355 B 0 B
build/livecodes/processor-windicss-compiler.js 450 B 0 B
build/livecodes/quill.css 697 B 0 B
build/livecodes/quill.js 5.87 kB 0 B
build/livecodes/resources.js 3.43 kB -3 B (-0.09%)
build/livecodes/result-utils.js 1.97 kB 0 B
build/livecodes/share.js 3.89 kB +1 B (+0.03%)
build/livecodes/snippets.js 6.08 kB -2 B (-0.03%)
build/livecodes/sync-ui.js 3.29 kB +1 B (+0.03%)
build/livecodes/sync.js 3.58 kB 0 B
build/livecodes/sync.worker.js 29.7 kB 0 B
build/livecodes/templates.js 32.4 kB 0 B
build/sdk/livecodes.js 4.43 kB 0 B
build/sdk/livecodes.umd.js 5.23 kB 0 B
build/sdk/package.json 456 B 0 B
build/sdk/preact.js 4.81 kB 0 B
build/sdk/react.js 4.79 kB 0 B
build/sdk/solid.js 4.94 kB 0 B
build/sdk/svelte.js 4.4 kB 0 B
build/sdk/vue.js 4.81 kB 0 B
build/sdk/web-components.js 5.83 kB 0 B

compressed-size-action

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes

  • Custom Flutter root element — lang-dart-runtime.ts now resolves a container for the Flutter engine (#livecodes-app from the HTML tab when present, else an injected full-page <div>) and passes it to DartWasm.loadRuntime, and defers runtime loading to first run so the container resolves after document.body/markup exist.
  • @live-codes/dart-wasm 0.7.0 — vendors.ts bumps the CDN base URL to the release whose loadRuntime accepts container.
  • Docs — new "Root Element" section plus an inline demo with a sized #livecodes-app element in flutter.mdx.

I confirmed @live-codes/dart-wasm@0.7.0 is published and that loadRuntime supports container (Flutter embeds into the given element; with no container it defaults to document.body, which is why the previous eager load at head-parse time — when document.body is still null — fell back to the engine's own full-page host). The injected position: fixed; inset: 0 container reproduces that viewport-filling behavior, #livecodes-app matches the convention used by the react/vue/svelte/elm runtimes, and the lazy ready() is safe because the result page is a fresh document per run.

Pullfrog  | View workflow run | Using deepseek-v4.1-flash (free via Pullfrog for OSS) | 𝕏

@coderabbitai

coderabbitai Bot commented Oct 10, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: dec1ab4b-3f12-49df-aedf-9c30868feaed

📥 Commits

Reviewing files that changed from the base of the PR and between 8372a8a and 261e3dd.


📒 Files selected for processing (3)
  • docs/docs/languages/flutter.mdx
  • src/livecodes/languages/dart/lang-dart-runtime.ts
  • src/livecodes/vendors.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.



Walkthrough

The Dart runtime now initializes on the first run. Flutter receives an existing #livecodes-app element or a new full-page container. The Dart WASM asset URL uses version 0.7.0, and the Flutter documentation describes render target selection and sizing.

Changes

Flutter runtime initialization

Layer / File(s) Summary
Flutter runtime initialization and render target
src/livecodes/languages/dart/lang-dart-runtime.ts, src/livecodes/vendors.ts, docs/docs/languages/flutter.mdx
The first run call initializes the Dart runtime. Flutter uses the existing #livecodes-app element or a new full-page div. The Dart WASM asset URL changes to version 0.7.0. The documentation describes render target selection and sizing.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant run
  participant flutterContainer
  participant DOM
  participant loadRuntime
  run->>flutterContainer: Select or create Flutter render container
  flutterContainer->>DOM: Find #livecodes-app or append full-page div
  run->>loadRuntime: Initialize runtime with Flutter container on first run
Loading

Merge Risk: ⚪ Minimal · up to 261e3

The initialization retry limitation predates this change, and the custom Flutter render target is supported. No new merge-blocking issue is identified.

Pre-merge checks | Passed 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly describes the main change: allowing a custom root element for Flutter applications.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR

🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

🛠️ Fix failing CI checks 💡
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@hatemhosny
hatemhosny merged commit c506e36 into develop Oct 11, 2026
26 of 27 checks passed
@hatemhosny
hatemhosny deleted the flutter branch October 11, 2026 03:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant