bubbles

A new Bubble and some new Textarea stuff

There are a couple nice features in today's release. Let's check em out!

If a tree falls in the forest…

At last, the tree Bubble from all star contributor @dlvhdr’s is here! He built it for DiffNav and graciously contributed to Bubbles. We've been working with Dolev for a long time and were totally stoked when he offerd to contribute.

Select all, ctrl+c, ctrl+v…done!

Our own @andrinoff added a bunch of awesome stuff to Textarea, including the long awaited text selection. Select, copy, and cut your way into mini text editing.

For more info see the docs.

And special thanks to @zoriya for adding ctrl+left/right bindings.

xoxo, Charm! 💌

Changelog

New!

• 8cea431500a8837c241cbe8ad71601aa8f00a0d9: feat(textarea): support ctrl + left/right/backspace (#1020) (@zoriya)
• 037ad37bb0aa6e8ec544df6d3af752755f0a72d9: feat: textarea selection (#1029) (@andrinoff)
• e97af08ee293131e7b71f7e3006c06a81a2584b8: feat: tree bubble (#893) (@dlvhdr)

Fixed

• 6484e49c0a051fe100cb16c0e184cabd4b53a6f0: fix(filepicker): don't blank the view when height is unset (#1026) (@andrinoff)

Other stuff

• 355f960a27f9b0bf455b3ddea66dc987db62317d: ci: sync dependabot config (#896) (@charmcli)
• ef8af03870c1817d3b0b4fa0578b661a576e0220: v2.2.0 (@andrinoff)

Thoughts? Questions? We love hearing from you. Feel free to reach out on X, Discord, Slack, The Fediverse, Bluesky.

Lil’ Textarea Fix

This is a tiny patch to fix a bug in textarea where the prompt character could be missing styling on empty lines. That’s all for now!

Thanks for using Bubbles, Charm 🌞

Changelog

Fixed

• d2b2217d6352ce04183623d66d4266115419733c: fix(textarea): apply prompt style on all lines, including fillers (@meowgorithm)

Docs

• a13f110fba4f13ce5fe9bc7fd51619f5782077b9: docs: fix typo in README (#921) (@Rohan5commit)

Thoughts? Questions? We love hearing from you. Feel free to reach out on X, Discord, Slack, The Fediverse, Bluesky.

Shrink ’n’ grow your textareas

The update adds a new feature to automatically resize your textarea vertically as its content changes.

ta := textarea.New()
ta.DynamicHeight = true   // Enable dynamic resizing
ta.MinHeight = 3          // Minimum visible rows
ta.MaxHeight = 10         // Maximum visible rows
ta.MaxContentHeight = 20  // Maximum rows of content

Piece of cake, right?

Enjoy! 💘

Changelog

New!

• f1daacfa0cfee07e31a12498078426d275aa5286: feat(textarea): dynamic height (#910) (@meowgorithm)

Thoughts? Questions? We love hearing from you. Feel free to reach out on X, Discord, Slack, The Fediverse, Bluesky.

Bubbles v2 is here! 🫧

We're thrilled to share Bubbles v2 with you! This release accompanies Bubble Tea v2 and Lip Gloss v2 and brings a ton of consistency, new features, and quality-of-life improvements across every component. Catch 'em all:

go get charm.land/bubbletea/v2
go get charm.land/bubbles/v2
go get charm.land/lipgloss/v2

You can also check the Upgrade Guide for more info.

There are a lot of changes in here, but we've found upgrading pretty easy, especially with a linter. Read on for the full breakdown!

[!NOTE] When in doubt, check the examples for reference — they've all been updated for v2.

🏠 New Home

Bubbles v2 now lives at charm.land:

import "charm.land/bubbles/v2"

All sub-packages follow the same pattern: charm.land/bubbles/v2/viewport, charm.land/bubbles/v2/list, etc.

🎨 Light and Dark Styles

Some Bubbles, like help, offer default styles for both light and dark backgrounds. Since Lip Gloss v2 removes AdaptiveColor, choosing light or dark is now a manual process. You've got a couple of options.

🎩 The Best Way

Have Bubble Tea query the background color for you. This properly queries the correct inputs and outputs, and happens in lockstep with your application:

func (m model) Init() tea.Cmd {
    return tea.RequestBackgroundColor
}

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    switch msg := msg.(type) {
    case tea.BackgroundColorMsg:
        m.help.Styles = help.DefaultStyles(msg.IsDark())
        return m, nil
    }
    // ...
}

If you're using Wish you must do it this way to get the background color of the client.

🤠 The Quick Way

Use the compat package in Lip Gloss. It's less recommended because it contains blocking I/O that operates independently of Bubble Tea, and when used with Wish it won't detect the client's background:

import "charm.land/lipgloss/v2/compat"

var hasDarkBG = compat.HasDarkBackground()

h := help.New()
h.Styles = help.DefaultStyles(hasDarkBG)

👀 Or Just Pick One

h.Styles = help.DefaultLightStyles() // light mode!
h.Styles = help.DefaultDarkStyles()  // jk dark mode

This pattern applies to help, list, textarea, and textinput.

🔑 The Init You Know and Love is Back

After experimenting with a few different forms of Init during the alphas, we decided the v1 signature was the right call after all. Init was a bit too redundant for our tastes given that initialization already happens in New:

func (m Model) Init() tea.Cmd

✨ The Big Highlights

Getters and Setters Everywhere

All components now use getter/setter methods instead of exported Width and Height fields. This lets us do internal bookkeeping when things change, and it makes the API consistent across every Bubble:

// Before
vp.Width = 40
fmt.Println(vp.Width)

// After
vp.SetWidth(40)
fmt.Println(vp.Width())

Affected: filepicker, help, progress, table, textinput, viewport.

Functional Options

Constructors now use the functional options pattern instead of positional args or separate constructor functions:

vp := viewport.New(viewport.WithWidth(80), viewport.WithHeight(24))
sw := stopwatch.New(stopwatch.WithInterval(500 * time.Millisecond))
t := timer.New(30*time.Second, timer.WithInterval(100*time.Millisecond))

DefaultKeyMap is a Function Now

All DefaultKeyMap package-level variables are now functions, so you get fresh values every time:

km := textinput.DefaultKeyMap()   // was textinput.D