PyIDE

PyIDE loads Pyodide from its versioned jsDelivr CDN by default. The full runtime distribution and its bundled packages are very large, so Hyperbook keeps them out of the exported book. Readers need an internet connection; their browsers download the runtime and requested packages and can cache these files for later visits.

To include Pyodide locally for self-hosted or offline books, set elements.pyide.cdn to false in hyperbook.json:

{
  "name": "My offline Hyperbook",
  "elements": {
    "pyide": { "cdn": false }
  }
}

The CLI then downloads and caches the full distribution the first time a build uses PyIDE. To prepare an offline build, run npx hyperbook assets fetch while online, then npx hyperbook build --offline. In VS Code, also run Hyperbook: Download Element Runtimes... and select PyIDE. Bundled packages then work without a CDN connection. Packages installed from PyPI through the packages attribute still need a network connection.

See CDN configuration for custom asset servers and hosting and caching for browser and build caches.

The pyide element represents a Python Integrated Development Environment (IDE) component. It is used to embed a Python coding environment within the hyperbook website. This element allows users to write, edit, and execute Python code directly in the browser.

Attributes

:::pyide
```python
a = 5 + 2
print(a)
```
:::

You can also use any package listed here: https://pyodide.org/en/stable/usage/packages-in-pyodide.html

If you need packages from PyPI, use the packages attribute with a comma-separated list. Hyperbook loads micropip and installs these packages before executing your script.

:::pyide{packages="snowballstemmer"}
 
```python
import snowballstemmer
stemmer = snowballstemmer.stemmer("english")
print(stemmer.stemWords(["running", "runner", "runs"]))
```
 
:::

:::pyide
 
 
```python
import numpy as np
 
a = np.arange(15).reshape(3, 5)
print(a)
```
 
:::

Add test cases

You can add test cases to the code snippets by adding a test tag to the code block. The #SCRIPT# comment will be replaced by the written code. It can be placed in any part of the code block.

:::pyide
 
```python test
#SCRIPT#
r = check_palindrom("uhu")
if r:
print("Pass")
else:
print("Fail")
```
 
```python test
#SCRIPT#
r = check_palindrom("test")
if not r:
    print("Pass")
else:
    print("Fail")
```
 
```python
def check_palindrom(s):
    return True
```
 
:::
 

When your code calls input(), the browser shows a prompt dialog for the value.

:::pyide
 
```python
a = input("Enter a value: ")
print(a)
```
 
:::

Stopping the execution

Libraries with SDL

PyGame

Top-level PyGame loops are wrapped automatically for browser execution, so you can write the loop directly without asyncio.run(...).

The drawing area takes its size from pygame.display.set_mode, so the canvas is as large as the surface your script asks for.

:::pyide{canvas}
 
```python
import pygame
 
pygame.init()
screen = pygame.display.set_mode((400, 300))
clock = pygame.time.Clock()
r = 0
g = 0
b = 0
running = True
 
while running:
    for event in pygame.event.get():
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_r:
                r = (r + 50) % 256
            elif event.key == pygame.K_g:
                g = (g + 50) % 256
            elif event.key == pygame.K_b:
                b = (b + 50) % 256
            elif event.key == pygame.K_ESCAPE:
                running = False
        elif event.type == pygame.QUIT:
            running = False
    screen.fill((r, g, b))
    pygame.display.flip()
    clock.tick(60)
```
 
:::

Pytamaro

Use packages="pytamaro" to render show_graphic(...) and show_animation(...) in the output panel.

:::pyide{packages="pytamaro"}
 
```python
from pytamaro import *
 
block_size = 25
num_blocks = 16
line = empty_graphic()
for col in range(num_blocks):
    if col % 2 == 0:
        color = black
    else:
        color = white
    block = rectangle(block_size, block_size, color)
    line = beside(line, block)
second_line = rotate(180, line)
finish_line = above(line, second_line)
show_graphic(finish_line)
```
:::

Turtle

import turtle gives you Python's own turtle module (the one in Python 3.14), drawing on the canvas of the element. Programs behave as they do with Python installed on a computer: the turtle draws in the same order and at the same speed, and clear(), undo(), fills, stamps, text and event handlers work as described in the Python documentation.

A few things differ because the canvas is part of the page:

• The canvas is 640×480 pixels. screensize() and setup() change its size; a larger canvas gets scrollbars.
• mainloop(), done() and exitonclick() are not needed. Functions registered with onkey(), onscreenclick() or ontimer() keep working after the program has ended, until it is run again or stopped. Key presses reach the canvas after listen() or a click on it.
• textinput() and numinput() ask in the input field below the canvas.
• bgpic() and register_shape() load GIF, PNG or JPEG files from the file system of the element.
• save() is not available.
• The Stop button also stops the drawing and the event handlers.

The tables list the most common functions.

Movement

Pen and drawing

State

Screen and reset

Events

Multiple turtles

Use Turtle() to create additional independent turtles that share the same canvas. Each turtle has its own position, heading, color, shape, and pen state and is controlled through the object it returns.

:::pyide{canvas}
 
```python
from turtle import *
from random import randint
 
speed(0)
penup()
goto(-140, 140)
 
for step in range(15):
  write(step, align='center')
  right(90)
  for num in range(8):
    penup()
    forward(10)
    pendown()
    forward(10)
  penup()
  backward(160)
  left(90)
  forward(20)
 
red = Turtle()
red.color('red')
red.shape('turtle')
red.penup()
red.goto(-160, 100)
red.pendown()
 
blue = Turtle()
blue.color('blue')
blue.shape('turtle')
blue.penup()
blue.goto(-160, 70)
blue.pendown()
 
green = Turtle()
green.shape('turtle')
green.color('green')
green.penup()
green.goto(-160, 40)
green.pendown()
 
for turn in range(100):
  red.forward(randint(1, 5))
  blue.forward(randint(1, 5))
  green.forward(randint(1, 5))
```
 
:::

:::pyide{canvas}
 
```python
from turtle import *
 
speed(50)
colormode(255)
screensize(900, 700, "#0f172a")
bgcolor("#0f172a")
pensize(2)
 
colors = [
    (244, 114, 182),
    (56, 189, 248),
    (251, 191, 36),
    (74, 222, 128),
]
 
for step in range(48):
    pencolor(colors[step % len(colors)])
    circle(160 - step * 2)
    right(15)
 
penup()
goto(0, -20)
pencolor("#f8fafc")
write("Hyperbook", align="center", font=("Arial", 24, "bold"))
hideturtle()
```
 
:::