CINXE.COM

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-5VSZM5J",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script><meta name="description" content="How to migrate web interop code from dart:html to package:web."><title>Migrate to package:web | Dart</title><link rel="icon" sizes="64x64" href="/assets/img/logo/dart-64.png" eleventy:ignore><link href="/assets/img/touch-icon-iphone.png" rel="apple-touch-icon" eleventy:ignore><link href="/assets/img/touch-icon-ipad.png" rel="apple-touch-icon" sizes="152x152" eleventy:ignore><link href="/assets/img/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="180x180" eleventy:ignore><link href="/assets/img/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="167x167" eleventy:ignore><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@dart_lang"><meta name="twitter:title" content="Migrate to package:web"><meta name="twitter:description" content="How to migrate web interop code from dart:html to package:web."><meta property="og:title" content="Migrate to package:web"><meta property="og:description" content="How to migrate web interop code from dart:html to package:web."><meta property="og:url" content="/interop/js-interop/package-web/"><meta property="og:image" content="/assets/img/logo/dart-logo-for-shares.png?2" eleventy:ignore><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Display:wght@400&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"><link rel="stylesheet" href="/assets/css/main.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js" integrity="sha512-nlp9/l96/EpjYBx7EP7pGASVXNe80hGhYAUrjeXnu/fyF5Py0/RXav4BBNs7n5Hx1WFhOEOWSAVjGeC3oKxDVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="/assets/js/os-tabs.js"></script><script src="/assets/js/utilities.js"></script><script src="/assets/js/main.js"></script><script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-26406144-4","auto"),ga("send","pageview")</script></head><body class="default.html show_banner"><a id="skip" href="#site-content-title">Skip to main content</a><section id="cookie-notice"><div class="container"><p>dart.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.</p><button id="cookie-consent" class="btn btn-primary">OK, got it</button></div></section><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5VSZM5J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><header id="page-header" class="site-header"><nav id="mainnav" class="site-header"><div id="menu-toggle"><i class="material-symbols">menu</i></div><a href="/" class="brand" title="Dart"><img src="/assets/img/logo/logo-white-text.svg" alt="Dart"></a><ul class="navbar"><li><a href="/overview" class="nav-link">Overview</a></li><li class="mainnav__get-started"><a href="/guides" class="nav-link"><span>Docs</span></a></li><li><a href="/community" class="nav-link">Community</a></li><li><a href="/#try-dart" class="nav-link">Try Dart</a></li><li><a href="/get-dart" class="nav-link">Get Dart</a></li><li class="searchfield"><form action="/search" class="site-header__search form-inline" id="cse-search-box"><input type="hidden" name="cx" value="011220921317074318178:_yy-tmb5t_i"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="hl" value="en"> <input class="site-header__searchfield form-control search-field" type="search" name="q" id="search-main" autocomplete="off" placeholder="Search" aria-label="Search"></form></li></ul></nav></header><div class="banner"><p class="banner__text">Announcing Dart 3.5 and an updated Dart roadmap! <a href="https://medium.com/dartlang/dart-3-5-6ca36259fa2f" target="_blank">Learn more</a></p></div><div id="sidenav"><form action="/search/" class="site-header__search form-inline"><input class="site-header__searchfield form-control search-field" type="search" name="q" id="search-side" autocomplete="off" placeholder="Search" aria-label="Search"></form><div class="site-sidebar"><ul class="navbar-nav"><li class="nav-item"><a href="/overview" class="nav-link">Overview</a></li><li class="nav-item"><a href="/community" class="nav-link">Community</a></li><li class="nav-item"><a href="https://dartpad.dev" class="nav-link">Try Dart</a></li><li class="nav-item"><a href="/get-dart" class="nav-link">Get Dart</a></li><li class="nav-item"><a href="/guides" class="nav-link">Docs</a></li><li aria-hidden="true"><div class="sidebar-primary-divider"></div></li></ul><ul class="nav flex-column"><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="false" aria-controls="sidenav-1">Language</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1"><li class="nav-item"><a class="nav-link" href="/language">Introduction</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-2" href="#sidenav-1-2" role="button" aria-expanded="false" aria-controls="sidenav-1-2">Syntax basics</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-2"><li class="nav-item"><a class="nav-link" href="/language/variables">Variables</a></li><li class="nav-item"><a class="nav-link" href="/language/operators">Operators</a></li><li class="nav-item"><a class="nav-link" href="/language/comments">Comments</a></li><li class="nav-item"><a class="nav-link" href="/language/metadata">Metadata</a></li><li class="nav-item"><a class="nav-link" href="/language/libraries">Libraries & imports</a></li><li class="nav-item"><a class="nav-link" href="/language/keywords">Keywords</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-3" href="#sidenav-1-3" role="button" aria-expanded="false" aria-controls="sidenav-1-3">Types</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-3"><li class="nav-item"><a class="nav-link" href="/language/built-in-types">Built-in types</a></li><li class="nav-item"><a class="nav-link" href="/language/records">Records</a></li><li class="nav-item"><a class="nav-link" href="/language/collections">Collections</a></li><li class="nav-item"><a class="nav-link" href="/language/generics">Generics</a></li><li class="nav-item"><a class="nav-link" href="/language/typedefs">Typedefs</a></li><li class="nav-item"><a class="nav-link" href="/language/type-system">Type system</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-4" href="#sidenav-1-4" role="button" aria-expanded="false" aria-controls="sidenav-1-4">Patterns</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-4"><li class="nav-item"><a class="nav-link" href="/language/patterns">Overview & usage</a></li><li class="nav-item"><a class="nav-link" href="/language/pattern-types">Pattern types</a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/dart-patterns-records" target="_blank" rel="noopener">Applied tutorial</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/language/functions">Functions</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-6" href="#sidenav-1-6" role="button" aria-expanded="false" aria-controls="sidenav-1-6">Control flow</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-6"><li class="nav-item"><a class="nav-link" href="/language/loops">Loops</a></li><li class="nav-item"><a class="nav-link" href="/language/branches">Branches</a></li><li class="nav-item"><a class="nav-link" href="/language/error-handling">Error handling</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-7" href="#sidenav-1-7" role="button" aria-expanded="false" aria-controls="sidenav-1-7">Classes & objects</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-7"><li class="nav-item"><a class="nav-link" href="/language/classes">Classes</a></li><li class="nav-item"><a class="nav-link" href="/language/constructors">Constructors</a></li><li class="nav-item"><a class="nav-link" href="/language/methods">Methods</a></li><li class="nav-item"><a class="nav-link" href="/language/extend">Extend a class</a></li><li class="nav-item"><a class="nav-link" href="/language/mixins">Mixins</a></li><li class="nav-item"><a class="nav-link" href="/language/enums">Enums</a></li><li class="nav-item"><a class="nav-link" href="/language/extension-methods">Extension methods</a></li><li class="nav-item"><a class="nav-link" href="/language/extension-types">Extension types</a></li><li class="nav-item"><a class="nav-link" href="/language/callable-objects">Callable objects</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-8" href="#sidenav-1-8" role="button" aria-expanded="false" aria-controls="sidenav-1-8">Class modifiers</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-8"><li class="nav-item"><a class="nav-link" href="/language/class-modifiers">Overview & usage</a></li><li class="nav-item"><a class="nav-link" href="/language/class-modifiers-for-apis">Class modifiers for API maintainers</a></li><li class="nav-item"><a class="nav-link" href="/language/modifier-reference">Reference</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-9" href="#sidenav-1-9" role="button" aria-expanded="false" aria-controls="sidenav-1-9">Concurrency</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-9"><li class="nav-item"><a class="nav-link" href="/language/concurrency">Overview</a></li><li class="nav-item"><a class="nav-link" href="/language/async">Asynchronous support</a></li><li class="nav-item"><a class="nav-link" href="/language/isolates">Isolates</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-10" href="#sidenav-1-10" role="button" aria-expanded="false" aria-controls="sidenav-1-10">Null safety</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-10"><li class="nav-item"><a class="nav-link" href="/null-safety">Sound null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/migration-guide">Migrating to null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/understanding-null-safety">Understanding null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/unsound-null-safety">Unsound null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/faq">FAQ</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-2" role="button" aria-expanded="false" aria-controls="sidenav-2">Core libraries</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-2"><li class="nav-item"><a class="nav-link" href="/libraries">Overview</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-core">dart:core</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-async">dart:async</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-math">dart:math</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-convert">dart:convert</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-io">dart:io</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-html">dart:html</a></li><div class="dropdown-divider"></div><li class="nav-item"><a class="nav-link" href="/libraries/collections/iterables">Iterable collections</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-2-10" href="#sidenav-2-10" role="button" aria-expanded="false" aria-controls="sidenav-2-10">Asynchronous programming</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-2-10"><li class="nav-item"><a class="nav-link" href="/libraries/async/async-await">Tutorial</a></li><li class="nav-item"><a class="nav-link" href="/libraries/async/futures-error-handling">Futures and error handling</a></li><li class="nav-item"><a class="nav-link" href="/libraries/async/using-streams">Using streams</a></li><li class="nav-item"><a class="nav-link" href="/libraries/async/creating-streams">Creating streams</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-3" role="button" aria-expanded="false" aria-controls="sidenav-3">Effective Dart</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-3"><li class="nav-item"><a class="nav-link" href="/effective-dart">Overview</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/style">Style</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/documentation">Documentation</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/usage">Usage</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/design">Design</a></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4">Packages</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-4"><li class="nav-item"><a class="nav-link" href="/tools/pub/packages">How to use packages</a></li><li class="nav-item"><a class="nav-link" href="/resources/useful-packages">Commonly used packages</a></li><li class="nav-item"><a class="nav-link" href="/guides/libraries/create-packages">Creating packages</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/publishing">Publishing packages</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/writing-package-pages">Writing package pages</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-4-6" href="#sidenav-4-6" role="button" aria-expanded="false" aria-controls="sidenav-4-6">Package reference</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-4-6"><li class="nav-item"><a class="nav-link" href="/tools/pub/dependencies">Dependencies</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/glossary">Glossary</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/package-layout">Package layout conventions</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/environment-variables">Pub environment variables</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/pubspec">Pubspec file</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/troubleshoot">Troubleshooting pub</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/verified-publishers">Verified publishers</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/security-advisories">Security advisories</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/versioning">Versioning</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/custom-package-repositories">Custom package repositories</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/guides/libraries/private-files">What not to commit</a></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5">Development</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-5"><li class="nav-item"><a class="nav-link" href="/guides/json">JSON</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/numbers">Number representation</a></li><li class="nav-item"><a class="nav-link" href="/resources/google-apis">Google APIs</a></li><li class="nav-item"><a class="nav-link" href="/multiplatform-apps">Multi-platform apps</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-5" href="#sidenav-5-5" role="button" aria-expanded="false" aria-controls="sidenav-5-5">Command-line & server apps</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-5-5"><li class="nav-item"><a class="nav-link" href="/server">Overview</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/get-started">Get started</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/cmdline">Write command-line apps</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/fetch-data">Fetch data from the internet</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/httpserver">Write HTTP servers</a></li><li class="nav-item"><a class="nav-link" href="/server/libraries">Libraries & packages</a></li><li class="nav-item"><a class="nav-link" href="/server/google-cloud">Google Cloud</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-6" href="#sidenav-5-6" role="button" aria-expanded="false" aria-controls="sidenav-5-6">Web apps</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-5-6"><li class="nav-item"><a class="nav-link" href="/web">Overview</a></li><li class="nav-item"><a class="nav-link" href="/web/get-started">Get started</a></li><li class="nav-item"><a class="nav-link" href="/web/deployment">Deployment</a></li><li class="nav-item"><a class="nav-link" href="/web/libraries">Libraries & packages</a></li><li class="nav-item"><a class="nav-link" href="/web/wasm">Wasm compilation</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/guides/environment-declarations">Environment declarations</a></li></ul></li><li class="nav-item"><a class="nav-link active collapsible" data-toggle="collapse" href="#sidenav-6" role="button" aria-expanded="true" aria-controls="sidenav-6">Interoperability</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-6"><li class="nav-item"><a class="nav-link" href="/interop/c-interop">C interop</a></li><li class="nav-item"><a class="nav-link" href="/interop/objective-c-interop">Objective-C & Swift interop</a></li><li class="nav-item"><a class="nav-link" href="/interop/java-interop">Java & Kotlin interop</a></li><li class="nav-item"><a class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-6-4" href="#sidenav-6-4" role="button" aria-expanded="true" aria-controls="sidenav-6-4">JavaScript interop</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-6-4"><li class="nav-item"><a class="nav-link" href="/interop/js-interop">Overview</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/usage">Usage</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/js-types">JS types</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/tutorials">Tutorials</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/past-js-interop">Past JS interop</a></li><div class="dropdown-divider"></div><li class="nav-item"><a class="nav-link active" href="/interop/js-interop/package-web">Web interop</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-7" role="button" aria-expanded="false" aria-controls="sidenav-7">Tools & techniques</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7"><li class="nav-item"><a class="nav-link" href="/tools">Overview</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-2" href="#sidenav-7-2" role="button" aria-expanded="false" aria-controls="sidenav-7-2">Editors & debuggers</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-2"><li class="nav-item"><a class="nav-link" href="/tools/jetbrains-plugin">IntelliJ & Android Studio</a></li><li class="nav-item"><a class="nav-link" href="/tools/vs-code">VS Code</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-devtools">Dart DevTools</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-2-4" href="#sidenav-7-2-4" role="button" aria-expanded="false" aria-controls="sidenav-7-2-4">DartPad</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-2-4"><li class="nav-item"><a class="nav-link" href="/tools/dartpad">Overview</a></li><li class="nav-item"><a class="nav-link" href="/tools/dartpad/troubleshoot">Troubleshooting DartPad</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-3" href="#sidenav-7-3" role="button" aria-expanded="false" aria-controls="sidenav-7-3">Command-line tools</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-3"><li class="nav-item"><a class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-7-3-1" href="#sidenav-7-3-1" role="button" aria-expanded="true" aria-controls="sidenav-7-3-1">Dart SDK</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-7-3-1"><li class="nav-item"><a class="nav-link" href="/tools/sdk">Overview</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-tool">dart</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-analyze">dart analyze</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-compile">dart compile</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-create">dart create</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-doc">dart doc</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-fix">dart fix</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-format">dart format</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-info">dart info</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/cmd">dart pub</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-run">dart run</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-test">dart test</a></li><li class="nav-item"><a class="nav-link" href="/tools/dartaotruntime">dartaotruntime</a></li><li class="nav-item"><a class="nav-link" href="/tools/experiment-flags">Experiment flags</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-7-3-2" href="#sidenav-7-3-2" role="button" aria-expanded="true" aria-controls="sidenav-7-3-2">Other command-line tools</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-7-3-2"><li class="nav-item"><a class="nav-link" href="/tools/build_runner">build_runner</a></li><li class="nav-item"><a class="nav-link" href="/tools/webdev">webdev</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-4" href="#sidenav-7-4" role="button" aria-expanded="false" aria-controls="sidenav-7-4">Static analysis</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-4"><li class="nav-item"><a class="nav-link" href="/tools/analysis">Customizing static analysis</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/sound-problems">Fixing common type problems</a></li><li class="nav-item"><a class="nav-link" href="/tools/non-promotion-reasons">Fixing type promotion failures</a></li><li class="nav-item"><a class="nav-link" href="/tools/linter-rules">Linter rules</a></li><li class="nav-item"><a class="nav-link" href="/tools/diagnostic-messages">Diagnostic messages</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-5" href="#sidenav-7-5" role="button" aria-expanded="false" aria-controls="sidenav-7-5">Testing & optimization</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-5"><li class="nav-item"><a class="nav-link" href="/guides/testing">Testing</a></li><li class="nav-item"><a class="nav-link" href="/web/debugging">Debugging web apps</a></li></ul></li></ul></li><li aria-hidden="true"><div class="sidebar-primary-divider"></div></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-9" role="button" aria-expanded="false" aria-controls="sidenav-9">Resources</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-9"><li class="nav-item"><a class="nav-link" href="/resources/dart-cheatsheet">Language cheatsheet</a></li><li class="nav-item"><a class="nav-link" href="/resources/breaking-changes">Breaking changes</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/evolution">Language evolution</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/spec">Language specification</a></li><li class="nav-item"><a class="nav-link" href="/resources/dart-3-migration">Dart 3 migration guide</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-9-6" href="#sidenav-9-6" role="button" aria-expanded="false" aria-controls="sidenav-9-6">Coming from ...</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-9-6"><li class="nav-item"><a class="nav-link" href="/resources/coming-from/js-to-dart">JavaScript to Dart</a></li><li class="nav-item"><a class="nav-link" href="/resources/coming-from/swift-to-dart">Swift to Dart</a></li></ul></li><div class="dropdown-divider"></div><li class="nav-item"><a class="nav-link" href="/resources/faq">FAQ</a></li><li class="nav-item"><a class="nav-link" href="/resources/glossary">Glossary</a></li><li class="nav-item"><a class="nav-link" href="/resources/books">Books</a></li><li class="nav-item"><a class="nav-link" href="/resources/videos">Videos</a></li><li class="nav-item"><a class="nav-link" href="/tutorials">Tutorials</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible" data-toggle="collapse" href="#sidenav-10" role="button" aria-expanded="true" aria-controls="sidenav-10">Related sites</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-10"><li class="nav-item"><a class="nav-link" href="https://api.dart.dev" target="_blank" rel="noopener">API reference</a></li><li class="nav-item"><a class="nav-link" href="https://medium.com/dartlang" target="_blank" rel="noopener">Blog</a></li><li class="nav-item"><a class="nav-link" href="https://dartpad.dev" target="_blank" rel="noopener">DartPad (online editor)</a></li><li class="nav-item"><a class="nav-link" href="https://flutter.dev" target="_blank" rel="noopener">Flutter</a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev" target="_blank" rel="noopener">Package site</a></li></ul></li></ul></div></div><main id="page-content"><div id="site-toc--side" class="site-toc"><header class="site-toc__title">Contents</header><ul class="section-nav"><li class="toc-entry nav-item"><a class="nav-link" href="#package-web-vs-dart-html">package:web vs dart:html</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#migrating-from-dart-html">Migrating from dart:html</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#renames">Renames</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#type-tests">Type tests</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#type-signatures">Type signatures</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#conditional-imports">Conditional imports</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#virtual-dispatch-and-mocking">Virtual dispatch and mocking</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#non-native-apis">Non-native APIs</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#zones">Zones</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#helpers">Helpers</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#examples">Examples</a></li></ul></div><article><div class="content"><div id="site-content-title"><h1>Migrate to package:web</h1></div><div id="site-toc--inline" class="site-toc toc-collapsible toc-collapsed"><header class="site-toc__title">Contents <span class="site-toc--inline__toggle toc-toggle-down"><i class="material-symbols">keyboard_arrow_down</i></span> <span class="site-toc--inline__toggle toc-toggle-up"><i class="material-symbols">keyboard_arrow_up</i></span></header><ul class="section-nav"><li class="toc-entry"><a href="#package-web-vs-dart-html">package:web vs dart:html</a></li><li class="toc-entry"><a href="#migrating-from-dart-html">Migrating from dart:html</a><ul><li class="toc-entry"><a href="#renames">Renames</a></li><li class="toc-entry"><a href="#type-tests">Type tests</a></li><li class="toc-entry"><a href="#type-signatures">Type signatures</a></li><li class="toc-entry"><a href="#conditional-imports">Conditional imports</a></li><li class="toc-entry"><a href="#virtual-dispatch-and-mocking">Virtual dispatch and mocking</a></li><li class="toc-entry"><a href="#non-native-apis">Non-native APIs</a></li><li class="toc-entry"><a href="#zones">Zones</a></li></ul></li><li class="toc-entry"><a href="#helpers">Helpers</a></li><li class="toc-entry"><a href="#examples">Examples</a></li></ul><span class="site-toc--inline__toggle toc-toggle-more-items"><i class="material-symbols">more_horiz</i></span></div><p>Dart's <a href="https://pub.dev/packages/web"><code>package:web</code></a> exposes access to browser APIs, enabling interop between Dart applications and the web. Use <code>package:web</code> to interact with the browser and manipulate objects and elements in the DOM.</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#D43324">import</span><span style="color:#11796D"> 'package:web/web.dart'</span><span style="color:#222222">;</span></span> <span class="line"></span> <span class="line"><span style="color:#D43324">void</span><span style="color:#6200EE"> main</span><span style="color:#222222">() {</span></span> <span class="line"><span style="color:#D43324"> final</span><span style="color:#222222"> div = document.</span><span style="color:#6200EE">querySelector</span><span style="color:#222222">(</span><span style="color:#11796D">'div'</span><span style="color:#222222">)!;</span></span> <span class="line"><span style="color:#222222"> div.text = </span><span style="color:#11796D">'Text set at </span><span style="color:#11796D">${</span><span style="color:#0468D7">DateTime</span><span style="color:#11796D">.</span><span style="color:#6200EE">now</span><span style="color:#11796D">()}</span><span style="color:#11796D">'</span><span style="color:#222222">;</span></span> <span class="line"><span style="color:#222222">}</span></span></code></pre></div></div><aside class="alert alert-warning"><div class="alert-header"><i class="material-symbols" aria-hidden="true">error</i> <span>Important</span></div><div class="alert-content"><p>If you maintain a public Flutter package that uses <code>dart:html</code> or any of the other Dart SDK web libraries, <strong>you should migrate to <code>package:web</code> as soon as possible</strong>. <code>package:web</code> is replacing <code>dart:html</code> and other web libraries as Dart's web interop solution long-term. Read the <strong><code>package:web</code> vs <code>dart:html</code></strong> section for more information.</p></div></aside><div class="header-wrapper"><h2 id="package-web-vs-dart-html"><code>package:web</code> vs <code>dart:html</code></h2><a class="heading-link" href="#package-web-vs-dart-html" aria-label="Link to 'package:web vs dart:html' section">#</a></div><p>The goal of <code>package:web</code> is to revamp how Dart exposes web APIs by addressing several concerns with the existing Dart web libraries:</p><ol><li><p><strong>Wasm compatibility</strong></p><p>Packages can only be compatible with <a href="/web/wasm">Wasm</a> if they use <a href="https://api.dart.dev/dart-js_interop/dart-js_interop-library.html"><code>dart:js_interop</code></a> and <a href="https://api.dart.dev/dart-js_interop_unsafe/dart-js_interop_unsafe-library.html"><code>dart:js_interop_unsafe</code></a>. <code>package:web</code> is based on <code>dart:js_interop</code>, so by default, it's supported on <code>dart2wasm</code>.</p><p>Dart core web libraries, like <a href="https://api.dart.dev/dart-html/dart-html-library.html"><code>dart:html</code></a> and <a href="https://api.dart.dev/dart-svg/dart-svg-library.html"><code>dart:svg</code></a>, are <strong>not supported</strong> when compiling to Wasm.</p></li><li><p><strong>Staying modern</strong></p><p><code>package:web</code> uses the <a href="https://www.npmjs.com/package/@webref/idl">Web IDL</a> to automatically generate <a href="/interop/js-interop/usage#interop-members">interop members</a> and <a href="/interop/js-interop/usage#interop-types">interop types</a> for each declaration in the IDL. Generating references directly, as opposed to the additional members and abstractions in <code>dart:html</code>, allows <code>package:web</code> to be more concise, easier to understand, more consistent, and more able to stay up-to-date with the future of Web developments.</p></li><li><p><strong>Versioning</strong></p><p>Because it's a package, <code>package:web</code> can be versioned more easily than a library like <code>dart:html</code> and avoid breaking user code as it evolves. It also makes the code less exclusive and more open to contributions. Developers can create <a href="/interop/js-interop/usage">alternative interop declarations</a> of their own and use them together with <code>package:web</code> without conflict.</p></li></ol><hr><p>These improvements naturally result in some implementation differences between <code>package:web</code> and <code>dart:html</code>. The changes that affect existing packages the most, like IDL <a href="#renames">renames</a> and <a href="#type-tests">type tests</a>, are addressed in the migration sections that follow. While we only refer to <code>dart:html</code> for brevity, the same migration patterns apply to any other Dart core web library like <code>dart:svg</code>.</p><div class="header-wrapper"><h2 id="migrating-from-dart-html">Migrating from <code>dart:html</code></h2><a class="heading-link" href="#migrating-from-dart-html" aria-label="Link to 'Migrating from dart:html' section">#</a></div><p>Remove the <code>dart:html</code> import and replace it with <code>package:web/web.dart</code>:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#D43324">import</span><span style="color:#11796D"> 'dart:html'</span><span style="color:#D43324"> as</span><span style="color:#222222"> html; </span><span style="color:#6E6E70">// Remove</span></span> <span class="line"><span style="color:#D43324">import</span><span style="color:#11796D"> 'package:web/web.dart'</span><span style="color:#D43324"> as</span><span style="color:#222222"> web; </span><span style="color:#6E6E70">// Add</span></span></code></pre></div></div><p>Add <code>web</code> to the <code>dependencies</code> in your pubspec:</p><div class="code-block-wrapper language-console"><div class="code-block-body"><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">dart pub add web</span></span></code></pre></div></div><p>The following sections cover some of the common migration issues from <code>dart:html</code> to <code>package:web</code>.</p><p>For any other migration issues, check the <a href="https://github.com/dart-lang/web">dart-lang/web</a> repo and file an issue.</p><div class="header-wrapper"><h3 id="renames">Renames</h3><a class="heading-link" href="#renames" aria-label="Link to 'Renames' section">#</a></div><p>Many of the symbols in <code>dart:html</code> were renamed from their original IDL declaration to align more with Dart style. For example, <code>appendChild</code> became <code>append</code>, <code>HTMLElement</code> became <code>HtmlElement</code>, etc.</p><p>In contrast, to reduce confusion, <code>package:web</code> uses the original names from the IDL definitions. A <code>dart fix</code> is available to convert types that have been renamed between <code>dart:html</code> and <code>package:web</code>.</p><p>After changing the import, any renamed objects will be new "undefined" errors. You can address these either:</p><ul><li>From the CLI, by running <code>dart fix --dry-run</code>.</li><li>In your IDE, by selecting the <code>dart fix</code>: <strong>Rename to '<code>package:web name</code>'</strong>.</li></ul><p>The <code>dart fix</code> covers many of the common type renames. If you come across a <code>dart:html</code> type without a <code>dart fix</code> to rename it, first let us know by filing an <a href="https://github.com/dart-lang/web/issues/new">issue</a>.</p><p>Then, you can try manually discovering the <code>package:web</code> type name of an existing <code>dart:html</code> member by looking up its definition. The value of the <code>@Native</code> annotation on a <code>dart:html</code> member definition tells the compiler to treat any JS object of that type as the Dart class that it annotates. For example, the <code>@Native</code> annotation tells us that the native JS name of <code>dart:html</code>'s <code>HtmlElement</code> member is <code>HTMLElement</code>, so the <code>package:web</code> name will also be <code>HTMLElement</code>:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#D43324">@Native</span><span style="color:#222222">(</span><span style="color:#11796D">"HTMLElement"</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#D43324">class</span><span style="color:#0468D7"> HtmlElement</span><span style="color:#D43324"> extends</span><span style="color:#0468D7"> Element</span><span style="color:#D43324"> implements</span><span style="color:#0468D7"> NoncedElement</span><span style="color:#222222"> { }</span></span></code></pre></div></div><p>To find the <code>dart:html</code> definition for an undefined member in <code>package:web</code>, try either of the following methods:</p><ul><li>Ctrl or command click the undefined name in the IDE and choose <strong>Go to Definition</strong>.</li><li>Search for the name in the <a href="https://api.dart.dev/dart-html/dart-html-library.html"><code>dart:html</code> API docs</a> and check its page under <em>Annotations</em>.</li></ul><p>Similarly, you might find an undefined <code>package:web</code> API whose corresponding <code>dart:html</code> member's definition uses the keyword <code>native</code>. Check if the definition uses the <code>@JSName</code> annotation for a rename; the value of the annotation will tell you the name the member uses in <code>package:web</code>:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#D43324">@JSName</span><span style="color:#222222">(</span><span style="color:#11796D">'appendChild'</span><span style="color:#222222">)</span></span> <span class="line"><span style="color:#0468D7">Node</span><span style="color:#6200EE"> append</span><span style="color:#222222">(</span><span style="color:#0468D7">Node</span><span style="color:#222222"> node) </span><span style="color:#D43324">native</span><span style="color:#222222">;</span></span></code></pre></div></div><p><code>native</code> is an internal keyword that means the same as <code>external</code> in this context.</p><div class="header-wrapper"><h3 id="type-tests">Type tests</h3><a class="heading-link" href="#type-tests" aria-label="Link to 'Type tests' section">#</a></div><p>It's common for code that uses <code>dart:html</code> to utilize runtime checks like <code>is</code>. When used with a <code>dart:html</code> object, <code>is</code> and <code>as</code> verify that the object is the JS type within the <code>@Native</code> annotation. In contrast, all <code>package:web</code> types are reified to <a href="https://api.dart.dev/dart-js_interop/JSObject-extension-type.html"><code>JSObject</code></a>. This means a runtime type test will result in different behavior between <code>dart:html</code> and <code>package:web</code> types.</p><p>To be able to perform type tests, migrate any <code>dart:html</code> code using <code>is</code> type tests to use <a href="https://api.dart.dev/dart-js_interop/JSAnyUtilityExtension.html#instance-methods">interop methods</a> like <code>instanceOfString</code> or the more convenient and typed <a href="https://api.dart.dev/dart-js_interop/JSAnyUtilityExtension/isA.html"><code>isA</code></a> helper (available from Dart 3.4 onward). The <a href="/interop/js-interop/js-types#compatibility-type-checks-and-casts">Compatibility, type checks, and casts</a> section of the JS types page covers alternatives in detail.</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">obj is </span><span style="color:#0468D7">Window</span><span style="color:#222222">; </span><span style="color:#6E6E70">// Remove</span></span> <span class="line"><span style="color:#222222">obj.</span><span style="color:#6200EE">instanceOfString</span><span style="color:#222222">(</span><span style="color:#11796D">'Window'</span><span style="color:#222222">); </span><span style="color:#6E6E70">// Add</span></span></code></pre></div></div><div class="header-wrapper"><h3 id="type-signatures">Type signatures</h3><a class="heading-link" href="#type-signatures" aria-label="Link to 'Type signatures' section">#</a></div><p>Many APIs in <code>dart:html</code> support various Dart types in their type signatures. Because <code>dart:js_interop</code> <a href="/interop/js-interop/js-types#requirements-on-external-declarations-and-function-tojs">restricts</a> the types that can be written, some of the members in <code>package:web</code> will now require you to <em>convert</em> the value before calling the member. Learn how to use interop conversion methods from the <a href="/interop/js-interop/js-types#conversions">Conversions</a> section of the JS types page.</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#222222">window.</span><span style="color:#6200EE">addEventListener</span><span style="color:#222222">(</span><span style="color:#11796D">'click'</span><span style="color:#222222">, callback); </span><span style="color:#6E6E70">// Remove</span></span> <span class="line"><span style="color:#222222">window.</span><span style="color:#6200EE">addEventListener</span><span style="color:#222222">(</span><span style="color:#11796D">'click'</span><span style="color:#222222">, callback.toJS); </span><span style="color:#6E6E70">// Add</span></span></code></pre></div></div><p>Generally, you can spot which methods need a conversion because they'll be flagged with some variation of the exception:</p><div class="code-block-wrapper language-plaintext"><div class="code-block-body"><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span>A value of type '...' can't be assigned to a variable of type 'JSFunction?'</span></span></code></pre></div></div><div class="header-wrapper"><h3 id="conditional-imports">Conditional imports</h3><a class="heading-link" href="#conditional-imports" aria-label="Link to 'Conditional imports' section">#</a></div><p>It is common for code to use a conditional import based on whether <code>dart:html</code> is supported to differentiate between native and web:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#D43324">export</span><span style="color:#11796D"> 'src/hw_none.dart'</span></span> <span class="line"><span style="color:#D43324"> if</span><span style="color:#222222"> (dart.library.io) </span><span style="color:#11796D">'src/hw_io.dart'</span></span> <span class="line"><span style="color:#D43324"> if</span><span style="color:#222222"> (dart.library.html) </span><span style="color:#11796D">'src/hw_html.dart'</span><span style="color:#222222">;</span></span></code></pre></div></div><p>However, since <code>dart:html</code> is not supported when compiling to Wasm, the correct alternative now is to use <code>dart.library.js_interop</code> to differentiate between native and web:</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#D43324">export</span><span style="color:#11796D"> 'src/hw_none.dart'</span></span> <span class="line"><span style="color:#D43324"> if</span><span style="color:#222222"> (dart.library.io) </span><span style="color:#11796D">'src/hw_io.dart'</span></span> <span class="line"><span style="color:#D43324"> if</span><span style="color:#222222"> (dart.library.js_interop) </span><span style="color:#11796D">'src/hw_web.dart'</span><span style="color:#222222">;</span></span></code></pre></div></div><div class="header-wrapper"><h3 id="virtual-dispatch-and-mocking">Virtual dispatch and mocking</h3><a class="heading-link" href="#virtual-dispatch-and-mocking" aria-label="Link to 'Virtual dispatch and mocking' section">#</a></div><p><code>dart:html</code> classes supported virtual dispatch, but because JS interop uses extension types, virtual dispatch is <a href="/language/extension-types">not possible</a>. Similarly, <code>dynamic</code> calls with <code>package:web</code> types won't work as expected (or, they might continue to work just by chance, but will stop when <code>dart:html</code> is removed), as their members are only available statically. Migrate all code that relies on virtual dispatch to avoid this issue.</p><p>One use case of virtual dispatch is mocking. If you have a mocking class that <code>implements</code> a <code>dart:html</code> class, it can't be used to implement a <code>package:web</code> type. Instead, prefer mocking the JS object itself. See the <a href="/interop/js-interop/mock">mocking tutorial</a> for more information.</p><div class="header-wrapper"><h3 id="non-native-apis">Non-<code>native</code> APIs</h3><a class="heading-link" href="#non-native-apis" aria-label="Link to 'Non-native APIs' section">#</a></div><p><code>dart:html</code> classes may also contain APIs that have a non-trivial implementation. These members may or may not exist in the <code>package:web</code> <a href="#helpers">helpers</a>. If your code relies on the specifics of that implementation, you may be able to copy the necessary code. However, if you think that's not tractable or if that code would be beneficial for other users as well, consider filing an issue or uploading a pull request to <a href="https://github.com/dart-lang/web"><code>package:web</code></a> to support that member.</p><div class="header-wrapper"><h3 id="zones">Zones</h3><a class="heading-link" href="#zones" aria-label="Link to 'Zones' section">#</a></div><p>In <code>dart:html</code>, callbacks are automatically zoned. This is not the case in <code>package:web</code>. There is no automatic binding of callbacks in the current zone.</p><p>If this matters for your application, you can still use zones, but you will have to <a href="/libraries/async/zones">write them yourself</a> by binding the callback. See <a href="https://github.com/dart-lang/sdk/issues/54507">#54507</a> for more details. There is no conversion API or <a href="#helpers">helper</a> available yet to automatically do this.</p><div class="header-wrapper"><h2 id="helpers">Helpers</h2><a class="heading-link" href="#helpers" aria-label="Link to 'Helpers' section">#</a></div><p>The core of <code>package:web</code> contains <code>external</code> interop members, but does not provide other functionality that <code>dart:html</code> provided by default. To mitigate these differences, <code>package:web</code> contains <a href="https://github.com/dart-lang/web/tree/main/web/lib/src/helpers"><code>helpers</code></a> for additional support in handling a number of use cases that aren't directly available through the core interop. The helper library contains various members to expose some legacy features from the Dart web libraries.</p><p>For example, the core <code>package:web</code> only has support for adding and removing event listeners. Instead, you can use <a href="https://github.com/dart-lang/web/blob/main/web/lib/src/helpers/events/streams.dart">stream helpers</a> that makes it easy to subscribe to events with Dart <code>Stream</code>s without writing that code yourself.</p><div class="code-block-wrapper language-dart"><div class="code-block-body"><span class="code-block-language" title="Language dart">dart</span><pre class="shiki dash-light" tabindex="0"><code><span class="line"><span style="color:#6E6E70">// dart:html version</span></span> <span class="line"><span style="color:#0468D7">InputElement</span><span style="color:#222222"> htmlInput = </span><span style="color:#0468D7">InputElement</span><span style="color:#222222">();</span></span> <span class="line"><span style="color:#D43324">await</span><span style="color:#222222"> htmlInput.onBlur.first;</span></span> <span class="line"></span> <span class="line"><span style="color:#6E6E70">// package:web version</span></span> <span class="line"><span style="color:#0468D7">HTMLInputElement</span><span style="color:#222222"> webInput = document.</span><span style="color:#6200EE">createElement</span><span style="color:#222222">(</span><span style="color:#11796D">'input'</span><span style="color:#222222">) </span><span style="color:#D43324">as</span><span style="color:#0468D7"> HTMLInputElement</span><span style="color:#222222">;</span></span> <span class="line"><span style="color:#D43324">await</span><span style="color:#222222"> webInput.onBlur.first;</span></span></code></pre></div></div><p>You can find all the helpers and their documentation in the repo at <a href="https://github.com/dart-lang/web/tree/main/web/lib/src/helpers"><code>package:web/helpers</code></a>. They will continuously be updated to aid users in migration and make it easier to use the web APIs.</p><div class="header-wrapper"><h2 id="examples">Examples</h2><a class="heading-link" href="#examples" aria-label="Link to 'Examples' section">#</a></div><p>Here are some examples of packages that have been migrated from <code>dart:html</code> to <code>package:web</code>:</p><ul><li><a href="https://github.com/flutter/packages/pull/5451/files">Upgrading <code>url_launcher</code> to <code>package:web</code></a></li></ul><p id="page-github-links"><span>Unless stated otherwise, the documentation on this site reflects Dart 3.5.4. Page last updated on 2024-11-17.</span> <a href="https://github.com/dart-lang/site-www/tree/main/src/content/interop/js-interop/package-web.md" target="_blank" rel="noopener">View source</a> <span>or </span><a href="https://github.com/dart-lang/site-www/issues/new?template=1_page_issue.yml&page-url=https://dart.dev/interop/js-interop/package-web/&page-source=https://github.com/dart-lang/site-www/tree/main/src/content/interop/js-interop/package-web.md" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.</p></div></article></main><footer id="page-footer"><div class="footer-section footer-main"><a href="/" class="brand" title="Dart"><img src="/assets/img/logo/logo-white-text.svg" alt="Dart" width="164"></a><div class="footer-social-links"><a href="https://medium.com/dartlang" target="_blank" rel="noopener" title="Medium blog"><svg><use href="/assets/img/social/medium.svg#medium"></use></svg> </a><a href="https://github.com/dart-lang" target="_blank" rel="noopener" title="GitHub"><svg><use href="/assets/img/social/github.svg#github"></use></svg> </a><a href="https://twitter.com/dart_lang" target="_blank" rel="noopener" title="X (Twitter)"><svg><use href="/assets/img/social/x.svg#x"></use></svg></a></div></div><div class="footer-section footer-tray"><div class="footer-licenses">Except as otherwise noted, this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License</a>.</div><div class="footer-utility-links"><ul><li><a href="/terms" title="Terms of use">Terms</a></li><li><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy">Privacy</a></li><li><a href="/security" title="Security philosophy and practices">Security</a></li></ul></div></div></footer></body></html>