Teach the island
new tricks.

Add pages to the island with DynamicBarKit: plain JavaScript, no build step. Try an add-on right here in the browser, or describe one and let an AI write it.

Write an add-on

An add-on is a folder with manifest.json and main.js. It draws pages in the open island and short events beside the closed one.

  1. Turn on Developer Mode

    In Settings, open Developer. While it's off, no add-on is read, run or shown.

  2. Create one

    Press Create. A starter add-on appears, switched on, with its folder open in Finder at ~/Library/Application Support/DynamicBar/AddOns/.

  3. Edit main.js

    Call DynamicBarKit.page to draw. With Live reload on, saving restarts the add-on. The console in Settings shows logs, errors with line numbers and layout warnings.

  4. Add settings and permissions

    Settings declared in the manifest become controls in the add-on's row. Permissions are asked for the same way.

  5. Share it

    Export a .dbaddon from the add-on's menu. Whoever installs it sees what it asks for first.

DynamicBarKit.md DynamicBarKit.d.ts
manifest.json

        
main.js

      

    


    

      
        
        
        
        safe area 314 × 110
        notch ≈ 190 × 32
        378 × 172 pt, grows to 600 × 320
        32
        32
        26
      
      

        
Layout rules

        
    
          
  • Never place anything in the notch. The safe area is added for you.
    • 
          
  • Use a vstack or hstack as the root, and put long content in a scroll.
    • 
          
  • Need more room? Pass { height, width } to page: up to 320 tall and 600 wide.
    • 
          
  • Text sits on dark glass: white by default, opacity 0.55 for secondary lines, 11 pt or larger.
    • 
          
  • Scripts run on the main thread. Use timers, never long loops, and pause in onClose.
    • 
        

      

    

  


  
  

    

      
Playground

      
Edit the script and press Run, or ⌘ Enter. Symbols are drawn as simple glyphs here, but page trees, actions, flashes, timers and storage behave as they do in the app.

    

    

      
main.js

      

        

          
          
          
        

        

          
          

          

        

        
Console

      

    

  


  
  

    

      
Let an AI write it

      
Describe the add-on you want. The prompt carries the whole DynamicBarKit reference, the layout rules and the output format, so Claude, ChatGPT or Gemini gets it right the first time.

    

    

      

        
        
        

        

          
          Open the reference
        

        
    
          
  1. Paste the prompt into your AI chat
    2. 
          
  2. Save the two files
    Make a folder for them in the AddOns folder.
    3. 
          
  3. Paste back what the console says
    Errors and layout warnings tell the AI exactly what to fix.
    4. 
        

      

      
prompt.md

    

  


  
  

    

      
Reference

      
DynamicBarKit 2. The full text is in DynamicBarKit.md, with typings in DynamicBarKit.d.ts.

    

    

      
CallWhat it does

      

        
NodeProperties

        
PermissionAllows

      

    

  







  

    
Made something good?

    
Share your add-on with everyone by opening an issue on GitHub.

    
Share an add-on