Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

ipywidgets: Interactive HTML Widgets

PurposeBadges
Latest (main: future 8.0)Test StatusDocumentation Status: latestBinder:main
StableVersionConda VersionDocumentation StatusBinder:7.x
CommunicationJoin the chat at https://gitter.im/ipython/ipywidgetsDiscourse

ipywidgets, also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel.

Notebooks come alive when interactive widgets are used. Users gain control of their data and can visualize changes in the data.

Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results. We hope you will add ipywidgets to your notebooks, and we're here to help you get started.

The ipywidgets package is under the Jupyter-Widgetssoftware subproject.

Core Interactive Widgets

The fundamental widgets provided by this library are called core interactive widgets. A demonstration notebook provides an overview of the core interactive widgets, including:

  • sliders
  • progress bars
  • text boxes
  • toggle buttons and checkboxes
  • display areas
  • and more

Jupyter Interactive Widgets as a Framework

Besides the widgets already provided with the library, the framework can be extended with the development of custom widget libraries. For detailed information, please refer to the ipywidgets documentation.

Cookiecutter template for custom widget development

A template project for building custom widgets is available as a cookiecutter. This cookiecutter project helps custom widget authors get started with the packaging and the distribution of their custom Jupyter interactive widgets. The cookiecutter produces a project for a Jupyter interactive widget library following the current best practices for using interactive widgets. An implementation for a placeholder "Hello World" widget is provided as an example.

Popular widget libraries such as bqplot, pythreejs and ipyleaflet follow exactly the same template and directory structure. They serve as more advanced examples of usage of the Jupyter widget infrastructure.

Popular custom widget examples

Examples of custom widget libraries built upon ipywidgets are

  • bqplot a 2d data visualization library enabling custom user interactions.
  • pythreejs a Jupyter - Three.js wrapper, bringing Three.js to the notebook.
  • ipyleaflet a leaflet widget for Jupyter.

Install

The stable version of ipywidgets can be installed with pip or conda.

With pip:

pip install ipywidgets

With conda:

conda install -c conda-forge ipywidgets

Developer install from source

Installing from source is more complicated and requires a developer install, see the detailed developer install instructions.

If you want to install ipywidgets from source, you will need the yarn package manager version 3 or later. To install the latest main version from the root directory of the source code, run dev-install.sh. To only build the Python package enter pip install -e ..

Usage

See the examples section of the documentation. The widgets are being used in a variety of ways; some uses can be seen in these notebooks: Demo notebook of interactive widgets

Change log

Change log

Version Compatibility with Front-End Clients

Refer to change log for more detail.

ipywidgetsJupyterLabClassic Notebooknbclassic
main-TBD
7.6.30.2.6
Legacy
6.x-
5.x4.2-
4.1.x4.1-
4.0.x4.0-

Contributing to ipywidgets

Developer information

License

We use a shared copyright model that enables all contributors to maintain the copyright on their contributions.

See the LICENSE file in this repository for details.

Project Jupyter resources

Developer Meetings take place on zoom, on Tuesdays at 9:30AM Pacific Time (your time).

Minutes are taken at Hackmd.io.

About

Interactive Widgets for the Jupyter Notebook

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages