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, proceed to work on your extension idea or return here to find inspiration 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.

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:

Setup:

📊 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%.

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. Bonus goal: Add a treemap visualization (like WinDirStat) to visually represent file sizes

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

  3. Environment inspector: Show installed packages and Python version in the sidebar

  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:

🎬 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

    • Make small commits for each “thing”

    • 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