Skip to article frontmatterSkip to article content

🧩 6 - Working on your own extension

🎯 Session Format

This is an open exploration session - similar to office hours or a study hall. You’ll choose a project that interests you and work on it with instructor support. Don’t worry about finishing - the goal is to practice the development workflow and problem-solving.

🚀 Getting Started

Before diving into your chosen path, make sure you have:

🔨 Path 1: Build your own extension from scratch

Create something entirely new using the extension template, AI assistance, and the patterns you’ve learned.

⚡ Quick start

Follow these sections from chapter 2 to start a new extension from a template:

  1. 🛠️ Setup - Set up your environment, Git, and GitHub repository

  2. 🏋️ Exercise A: Extension creation and development loop - Create your extension from the template and test the development loop

Once you have your extension set up and working, return here to choose an inspiration project below.

💫 Inspiration

The following three examples with prompts have been tested and confirmed working. Pick one that matches your interests - whether you want visual effects, creative customization, or full-stack development. Use them as-is to practice prompt engineering, or as inspiration for your own ideas.

🎉 Confetti celebration button

Complexity: Beginner (Frontend only) Time: 15-20 minutes What you’ll work with: Status bar integration, DOM manipulation, visual effects

The Prompt:

Add a button in the status bar to celebrate something! It should show confetti
on top of the UI for 3 seconds

Expected Results:

What to Watch For:

If the confetti doesn’t appear, try prompting:

The button is there but I don't see confetti. Check that the z-index
is high enough and the confetti container is properly positioned.

To customize:

Make the confetti more colorful and add a sound effect when it triggers.

Verified Setup:

🎨 Custom theme extension

Complexity: Beginner (Frontend only) Time: 20-30 minutes What you’ll work with: Theme customization, CSS styling, JupyterLab theming system

The Prompt:

Create a theme based on [your favorite movie/show/game/aesthetic]

Example:

Create a theme based on Netflix show KPop Demon Hunters

Expected results:

What to watch for:

To add a background image to the main panel:

Can we use this image as a background for main panel?
[paste your image URL]

Example:

Can we use this image as a background for main panel?
https://www.billboard.com/wp-content/uploads/2025/07/kpop-demon-hunters-billboard-1800.jpg?w=942&h=628&crop=1

To refine the styling:

The background image is too bright - make it more subtle with reduced opacity
and add a dark overlay so text is readable.

To adjust colors:

Update the sidebar and toolbar colors to match the theme's color palette.
Use [specific colors] for accent elements.

Tips for finding images:

📊 CPU monitor widget

Complexity: Intermediate (Frontend + Server) Time: 30-40 minutes What you’ll work on: REST API integration, backend data processing, error handling

The Prompt:

Create a JupyterLab extension that monitors CPU stats:
- Use psutil on the backend to get utilization and temperature data
- Create a REST API endpoint
- Display it in a widget in the main area
- Handle gracefully if some fields aren't available

Expected results:

What to watch for:

If psutil isn’t installed:

I'm getting ModuleNotFoundError for psutil. Update pyproject.toml to
include psutil as a dependency.

If the widget doesn’t update:

The widget shows data once but doesn't update. Add automatic polling
every 2 seconds to refresh the CPU stats.

To extend it:

Add a graph that shows CPU usage over the last 60 seconds,
and highlight in red when usage is above 80%.

Verified setup:

🌟 More extension ideas

Pick an idea that matches your comfort level and interests:

🎓 Beginner (frontend only)

  1. Theme switcher dropdown: Add a quick theme selector to the toolbar for easy switching

  2. Quote of the day: Main area widget that fetches and displays random quotes

  3. Keyboard shortcut viewer: Panel showing all available shortcuts

  4. Pomodoro timer: Status bar timer for focused work sessions with notifications

🚦 Intermediate (frontend + server)

  1. File size analyzer: Scan workspace directory and show largest files/folders

  2. Git status widget: Display current branch, uncommitted changes count

  3. Environment inspector: Show installed packages and Python version

  4. Todo list with persistence: Sidebar panel that saves tasks to disk

🎯 Advanced

  1. Custom welcome screen: Override the default launcher with your own design

  2. AI code assistant: Create a chat with LLM

  3. Performance profiler: Instrument notebook cells and show execution metrics

  4. Custom file format viewer: Add support for viewing unsupported file types

  5. Real-time log viewer: Stream and filter server logs in a widget

💡 Even more ideas from JupyterLab community

JupyterLab Extension Ideas

🤝 Path 2: Contribute to existing extensions

Contributing to established extensions is a great way to learn real-world patterns and give back to the community.

🌱 Why contribute?

🔍 Find your project

See our Show & Tell session for a curated list of popular JupyterLab extensions and inspiration on projects to contribute to.

🐛 Beginner-friendly JupyterLab core

Want to contribute to JupyterLab itself? Here are good first issues:

JupyterLab Core:

Extension Template:

✅ Check the project needs

Check the project board or GitHub Issues for:

Browse recent issues and look for:

🎬 Making your first contribution

  1. Set up the development environment:

    # Fork the repository on GitHub first, then:
git clone https://github.com/YOUR-USERNAME/extension-name.git
cd extension-name

# Follow the project's CONTRIBUTING.md instructions
# Usually similar to:
pip install --editable ".[dev,test]"
jupyter labextension develop . --overwrite
jlpm build

  2. Create a branch for your work:

    git checkout -b fix/issue-123-button-alignment

  3. Make your changes:

    • Start small - fix one thing at a time

    • Follow the project’s code style

    • Add or update tests if applicable

    • Update documentation

  4. Test thoroughly:

    # Run the project's test suite
jlpm test
pytest

# Test manually in JupyterLab
jupyter lab

  5. Commit and push:

    git add .
git commit -m "Fix button alignment in toolbar (#123)"
git push -u origin fix/issue-123-button-alignment

  6. Open a Pull Request:

    • Go to the original repository on GitHub

    • Click “New Pull Request”

    • Select your fork and branch

    • Describe what you changed and why

    • Reference the issue number if applicable

📋 Contribution checklist

Before opening a PR, verify:

🔧 When contributing gets stuck

If you’re blocked:

If maintainers request changes:

🔄 Development Workflow

This is the cycle you’ll repeat many times during development:

  1. Write a clear prompt - Provide context, requirements, and constraints

  2. Review generated code - Read and understand it; don’t blindly accept

  3. Build: Run jlpm build to compile your extension

  4. Test: Refresh JupyterLab (or restart if backend changed)

  5. Debug: Check browser console and terminal for errors

  6. Iterate: Refine your prompt based on results

  7. Commit: Save working states frequently with git

💪 Tips for productive development

💬 Getting Help

👥 During this session

Where to get help:

When to ask for help - Don’t stay stuck! Ask an instructor if:

How to ask effectively:

🎁 Wrapping up your work

Before the session ends, take 10 minutes to:

  1. Commit your changes:

    git add .
git commit -m "Work in progress: [what you accomplished]"
git push

  2. Document your progress in README.md:

    • What you built or contributed

    • What works and what’s still in progress

    • Interesting challenges you solved

    • Next steps you’d like to take

  3. Reflect on what you learned:

    • What surprised you about AI-assisted development?

    • What JupyterLab concepts clicked for you?

    • What would you explore next?

🚪 After the tutorial

🛠️ To continue developing

📢 To share your work

🌍 To contribute more

📚 Reference Materials

Bookmark these resources for when you need them during development:

📖 Documentation

💻 Code Examples

🔑 Key JupyterLab APIs

Common tokens and services you’ll use:

APIUse CaseDocumentation
INotebookTrackerTrack active notebooksDocs
IStatusBarAdd widgets to status barDocs
ICommandPaletteRegister commandsDocs
IFileBrowserFactoryAccess file browserDocs
IThemeManagerTheme customizationDocs
ISettingRegistryExtension settingsDocs

🖥️ Server Extensions

🔬 Tools & Discovery

Materials
🤖 5 - Developing extensions with AI assistance