Convert Figma logo to code with AI

iodide-project logoiodide

Literate scientific computing and communication for the web

1,488
141
1,488
205

Top Related Projects

11,556

Jupyter Interactive Notebook

6,194

📘 The interactive computing suite for you! ✨

21,148

Data Apps & Dashboards for Python. No JavaScript Required.

34,470

Streamlit — A faster way to build and share data apps.

VS Code Jupyter extension

Quick Overview

Iodide is an experimental web-based notebook environment for scientific computing and communication. It aims to provide a literate programming environment that combines code, prose, and interactive visualizations in a single document, all running in the browser.

Pros

  • Runs entirely in the browser, eliminating the need for server-side infrastructure
  • Supports multiple programming languages, including JavaScript, Python (via Pyodide), and R
  • Enables easy sharing and collaboration through shareable notebook URLs
  • Provides a rich set of built-in data visualization tools

Cons

  • Still in experimental stage, which may lead to instability or breaking changes
  • Limited ecosystem compared to more established notebook environments like Jupyter
  • Performance may be slower for computationally intensive tasks compared to native environments
  • Requires an internet connection for full functionality

Code Examples

  1. Creating a simple plot using JavaScript:
// Create a simple line plot
const x = Array.from({length: 100}, (_, i) => i);
const y = x.map(val => Math.sin(val * 0.1));

Plot.plot({
  marks: [
    Plot.line(x, y)
  ]
}).plot();
  1. Running Python code using Pyodide:
%%py
import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 10, 100)
y = np.sin(x)

plt.plot(x, y)
plt.title('Sine Wave')
plt.xlabel('x')
plt.ylabel('sin(x)')
plt.show()
  1. Fetching and displaying data using JavaScript:
// Fetch data from an API and display it
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const table = document.createElement('table');
    // Populate table with data
    // ...
    document.body.appendChild(table);
  });

Getting Started

To get started with Iodide:

  1. Visit https://iodide.io/
  2. Click "Create New Notebook" to start a new project
  3. Begin writing code in the code cells and add markdown in the text cells
  4. Use the language selector to switch between JavaScript, Python, and other supported languages
  5. Click "Run" to execute your code and see the results
  6. Share your notebook by clicking "Share" and copying the provided URL

Note: Iodide is a web-based environment, so no installation is required to start using it.

Competitor Comparisons

11,556

Jupyter Interactive Notebook

Pros of Jupyter Notebook

  • Widely adopted and supported by a large community
  • Supports multiple programming languages (Python, R, Julia, etc.)
  • Extensive ecosystem of extensions and integrations

Cons of Jupyter Notebook

  • Requires server-side installation and setup
  • Version control can be challenging due to JSON-based notebook format
  • Limited real-time collaboration features

Code Comparison

Jupyter Notebook (Python):

%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
plt.plot(x, np.sin(x))
plt.show()

Iodide (JavaScript):

const x = Array.from({length: 100}, (_, i) => i / 10);
const y = x.map(Math.sin);

plot({
  x: x,
  y: y,
  type: 'line'
});

Both Jupyter Notebook and Iodide aim to provide interactive computing environments, but they differ in their approach and target audience. Jupyter Notebook is a more established and versatile tool, supporting multiple languages and offering a rich ecosystem. Iodide, on the other hand, focuses on web-based scientific computing using JavaScript, providing a more accessible platform for sharing and collaborating on data science projects directly in the browser.

6,194

📘 The interactive computing suite for you! ✨

Pros of nteract

  • More mature project with a larger community and wider adoption
  • Supports multiple programming languages beyond just JavaScript
  • Offers desktop applications in addition to web-based notebooks

Cons of nteract

  • More complex architecture, potentially harder to contribute to
  • Less focus on real-time collaboration features
  • Heavier resource usage due to its broader feature set

Code Comparison

nteract (JavaScript):

import { displayData } from '@nteract/outputs';

export const component = props => {
  return <div>{displayData({ 'text/plain': 'Hello, nteract!' })}</div>;
};

Iodide (JavaScript):

iodide.output.display('text/plain', 'Hello, Iodide!');

Key Differences

  • nteract is a more comprehensive notebook ecosystem, while Iodide focuses on web-based, JavaScript-centric notebooks
  • Iodide emphasizes real-time collaboration and web publishing, whereas nteract provides a broader range of notebook environments
  • nteract has a larger codebase and more dependencies, while Iodide aims for a simpler, more web-native approach

Both projects aim to enhance the notebook experience, but they cater to different use cases and preferences within the data science and interactive computing communities.

21,148

Data Apps & Dashboards for Python. No JavaScript Required.

Pros of Dash

  • More mature and actively maintained project with frequent updates
  • Extensive documentation and large community support
  • Seamless integration with Plotly's powerful charting library

Cons of Dash

  • Steeper learning curve for beginners
  • Requires more setup and boilerplate code
  • Limited to Python for backend logic

Code Comparison

Dash example:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(id='example-graph')
])

Iodide example:

%% js
const plot = require('plotly.js-basic-dist')
plot.newPlot('myDiv', [{x: [1, 2, 3], y: [2, 1, 3]}])

Summary

Dash offers a more robust and feature-rich environment for building data visualization applications, with strong community support and integration with Plotly's charting capabilities. However, it may be more complex for beginners and is primarily Python-focused.

Iodide provides a simpler, notebook-style interface that can be more accessible for quick prototyping and exploration, especially for those familiar with JavaScript. It offers a more lightweight approach but may lack some of the advanced features and extensive documentation found in Dash.

34,470

Streamlit — A faster way to build and share data apps.

Pros of Streamlit

  • Easier to get started with for Python developers
  • More active development and larger community
  • Better documentation and tutorials available

Cons of Streamlit

  • Less flexible for complex, interactive web applications
  • Limited customization options for UI components
  • Primarily focused on data science applications

Code Comparison

Streamlit:

import streamlit as st
import pandas as pd

data = pd.read_csv("data.csv")
st.line_chart(data)

Iodide:

const data = await fetchData("data.csv");
const chart = Plot.line(data).plot();
element.appendChild(chart);

Summary

Streamlit is a Python-based framework for creating data applications, while Iodide is a web-based notebook environment for literate programming. Streamlit offers a simpler approach for data scientists to create interactive visualizations, but may be less flexible for complex web applications. Iodide provides a more versatile environment for combining code, prose, and interactive elements, but has a steeper learning curve and smaller community. The choice between the two depends on the specific project requirements and the developer's familiarity with Python or JavaScript.

VS Code Jupyter extension

Pros of vscode-jupyter

  • Integrated with VS Code, providing a familiar and feature-rich development environment
  • Supports multiple programming languages beyond Python, including R and Julia
  • Offers robust debugging capabilities and IntelliSense for code completion

Cons of vscode-jupyter

  • Requires VS Code installation, which may be heavier than a web-based solution
  • Less focus on collaborative features compared to Iodide's real-time collaboration
  • May have a steeper learning curve for users new to VS Code

Code Comparison

Iodide (JavaScript):

%% js
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World"));

vscode-jupyter (Python):

# %%
def greet(name):
    return f"Hello, {name}!"
print(greet("World"))

Both examples demonstrate basic code execution in their respective environments. Iodide uses JavaScript with special cell markers, while vscode-jupyter uses Python with cell markers compatible with Jupyter notebooks.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Please note: Iodide is no longer under development, nor being actively maintained.

New PRs and issues are unlikely to be reviewed, and bugs are likely to go unfixed. We hope that future projects may be able to learn something from our experiments, so as of September 2020 we have no plans to take down the demo server at https://alpha.iodide.io/. Nonetheless, iodide.io should not be used for important work, as it may be shut down in the future.

Note that the pyodide project (python-on-webassembly) continues and is unaffected by this change. For another take on interactive, client-side notebooks, you may also be interested in the Starboard Notebook which provides some of the same capabilities as Iodide and is in active development.

Huge thanks to our community for your support and interest over these last few years!


CircleCI Join the chat at https://gitter.im/iodide-project/iodide codecov

The Iodide notebook

View source for science

Try it in your browser right now!

Today, sharing scientific results is easier than ever. You can email a PDF, write up a Google doc, or post to your blog. You can embed plots, data tables, and even interactive visualizations. But what if you want people to be able to replicate and extend your results -- to take your results and “view source” to see how you arrived at your conclusions? Or even hack and remix them to ask their own questions?

To do that now, you typically have a couple of options. You could send your code alongside your nice, clean PDF or blog post, allowing you fine-grained control over your presentation, but that requires you to separate your presentable results from your code and to manage multiple files. Alternatively, you could share your results and code bundled together in a notebook format that mixes code with write-up; this has the advantage of keeping your code and results closely tied together, but the presentation can get a bit unwieldy, especially if you want to share your results with a less technical audience. And in either case, sharing your code will only allow your collaborators to replicate and extend your results if they are first able to replicate your whole setup -- if they can run your code with the same libraries, the same data, and the server access.

If only there was a technology that was great for presenting documents and visualizations, that allows code to run anywhere with zero setup, and that all scientists and citizens had access to...

Luckily, that technology already exists: the web browser.

lorenz-scaled-loop

Iodide is a modern, literate, and interactive programming environment that uses the strengths of the browser to let scientists work flexibly and collaboratively with minimal friction. With Iodide you can tell the story of your findings exactly how you want, leveraging the power of HTML+CSS to display your results in whatever way communicates them most effectively -- but still keeping the live, editable code only one click away. Because Iodide runs in the browser you already have, you can extend and modify the code without having to install any software, enabling you to collaborate frictionlessly.

And thanks to WebAssembly, working in the browser doesn't mean that you're restricted to working in just JavaScript. Via the Pyodide project you can already do data science work in the browser using Python and the core of the Python science stack (Numpy, Pandas, and Matplotlib). And that's just the start. We envision a future workflow that allows you to do your data munging in Python, fit a quick model in R or JAGS, solve some differential equations in Julia, and then display your results with a live interactive d3+JavaScript visualization... and all that within a single, portable, sharable, and hackable file.

Our focus is on delivering frictionless, human-centered tools to scientists. You can read more about our core principles below. If this vision resonates with you, please consider contributing to the project!

Visit https://alpha.iodide.io/ to see example and demo notebooks, and to learn more!

For information on developing and contributing to iodide, please see our documentation.

PS: We've got a few other ideas about how to make in-browser workflows as ergonomic for scientific tasks as possible, including

  1. using modern JS transpilation tools to extend JS syntax for numerical computing -- just enough for matrix operations, operation broadcasting, n-dimensional slicing, and a few other basic scientific computing needs;
  2. compiling best-in-class C/C++ science libraries (and runtimes!) to Webassembly and wrapping them in ergonomic JS APIs.

If either of those projects appeals to you, please reach out!

Get in touch

Please feel free to join our Google group to contact us and keep up with what we're working on.

You can also chat with us on Gitter.

License

The Iodide code is shared under the terms of the Mozilla Public License v2.0. See the LICENSE file at the root of the repository.