It's been a while since our last update, but we think this was worth the wait!

While working with our beta testers to improve Legend, we hit a wall. A small number of users were having sync problems but they were not fixable within our old sync system. Plus, Legend was not as fast as our most advanced users needed, but it was already pushing the boundaries of what web apps could achieve. So we took a step back to find a better way.

In partnership with the Bravely team, we embarked on a journey to rebuild our state and sync systems from scratch. The result is our new open-source state library that's faster than every other React state library. This powers our brand-new sync engine, ensuring speed, stability, and resilience to network hiccups. It's open-source with over 2,000 stars on GitHub already, and we're continually collaborating with the open-source community to make it even better.

We've been beta testing this new sync system for six months to make sure it's 100% perfect, and we want to give the beta testers a big thank you. We couldn't have done it without you ❤️.

So, what's in it for you?

🚀 Turbocharged Performance

Load times are drastically reduced. While Legend was already fast for most people, it now loads up to 7x faster. Plus, everything is snappier now. We rebuilt the collapsing algorithm so it's instantaneous even in huge documents. Big pastes, document switching, filter changes, and loading remote changes are faster, among tons of other speed-ups. We basically tracked down everything slow that we could find and made it fast.

🔄 Sync That Just Works

Syncing is the heart of Legend and it's crucial that it be perfect. We've rebuilt it from the ground up to be flawless, no matter the circumstances. Whether you're on a shaky network, in a tunnel, or working from your underwater sealab, Legend's sync won't skip a beat. The goal is that it's so good you won't even have to think about it.

🐞 A Bug-Free Experience

While developing and beta testing the new sync system we've also been on a relentless bug-hunting expedition. We've fixed tons of glitches and inconsistencies, big and small, so you can focus on being productive without distraction.

Up Next

Now that this massive project is complete, we're going to focus on tracking down bugs and adding the little features you're asking for. This revamped core makes development easier and require less code, so we'll be able to bring you future updates much faster. We also have some big ideas that will improve the email integrations and unlock a whole host of new features, but we want to focus on tightening up the current features first.

Please let us know in the forum if you find any bugs or have any feature requests so that we can make Legend better for you 😎.

Like most other apps, Legend relies on many open source tools and we felt that it was long overdue for us to give back to the open source community. So we have released our second open source project, and we are super proud of it! This took a lot of our attention this month, so in this update we'll tell you a bit about these projects.

We won't go into too many technical details so even if you're not a developer it should be interesting.

Legend-State

While upgrading and optimizing Legend's state system to use it as the basis of the new backend, we found that it had become really delightful to use and is faster than other popular React state libraries.

And beyond being really fast, it's super nice to use.

// Create an observable object
const state = observable({ settings: { theme: 'dark' } })

// Observables work like any other object
state.settings.theme === 'dark' // true

// observe re-runs when any observables change
observe(() => {
    console.log(state.settings.theme)
})

// Components automatically track observables and re-render when state changes
// No HOC or selector needed
function Component {
    return <div>Theme: {state.settings.theme}</div>
}

So we decided to open source it so other developers can use it. We're using it for the new backend first, and then we will migrate all of Legend over to this new state system, so you will also see Legend get faster 🔥.

Check out the documentation for more.

Legend-Motion

Legend-Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations. It has an API similar to Framer Motion for ease of use and mixing with web animations.

This is a live example:

<Motion.View
    initial={{ y: -50 }}
    animate={{ x: value * 100, y: 0 }}
    transition={{ type: "spring" }}
/>

Check out the documentation for more.

For this past month we've taken a break from big new features and have been focusing on polishing and improving existing features. So we have some upgrades in a few areas:

Popup Panes

Popup panes are a nice way to work on something temporary withing modifying a board. In addition to fixing some bugs and streamlining them, we also added lots more ways to open them.

You can right click an item to open a popup pane zoomed into it, click the kebab menu at the top right of a pane to clone it as a popup pane, and use the command palette or hotkey to clone the current pane to a popup.

One new feature we love is the popup pane gets out of the way to let you drag an item onto your board, which makes it super easy to open a search result in a popup and drag it to the right place.

Drag and Drop

In addition to fixing some minor bugs, dragging now shows only one line and lives below the cursor to stay out of your way while finding a target. And it has a cool blurred background :)

And a highly requested upgrade! Dropping an item now retains its collapsed state.

Focus Mode

Focus mode is great for when you have a ton of panes on a board. Press + + Z to make your current pane large and centered, and hide everything else.

Miscellaneous

This update has tons of small fixes and improvements. Check out the what's new page for all the details.

Legend has always been rooted in outlining, but we wanted to bring you the power of an outliner even in normal documents. So today we have an experimental new feature that gives you all the power of an outliner without needing to indent.

You can now use Heading size to create a hierarchy. So items below an H1 will be considered its children, and an H2 creates another level of hierarchy.

You can see in this demo video that all of the normal outlining features like collapsing, zooming, and filtering work as expected, but by using Heading size instead of indentation.

The goal of this feature is to:

1. Look more aesthetically pleasing as normal documents
2. Reduce some downsides of deeply nested hierarchy where indentation reduces usable space for text, especially in small panes
3. Appeal to people who are more familiar with regular documents than outliners

We are already using this extensively ourselves for some smaller documents where we don't need a lot of hierarchy, so segmenting by Heading is a clean way to visualize our projects.

Enabling

This feature is still a bit experimental, so it's not yet enabled by default. You can try it by enabling "Infer hierarchy from heading size" in the General section of the Settings.

Feedback

We would love your feedback on this feature. Please post in the forum thread or email us if you find any issues or have any suggestions.

Updated Homepage

We also updated our homepage with new videos and animations that are more descriptive about how Legend works. We hope you like it!

This month was spent mainly on improving the Help and creating content to help you get started.

• The Help page has a new Workflow Examples section with some advanced workflows.
• We have a new Medium Publication where we're posting workflow examples. So far we have some great posts by some of our users, Stephen Zeoli and Tim Lutero, and we will continue to add more there.
• We have a new YouTube Channel where we've posted two videos so far. We're starting with the basics to help you get started, and we will make more videos with more advanced topics.
• We've become more active on our Twitter Account. We will post updates there so follow us to get notified.

And of course we got in some good features and bug fixes too:

Improved Calendar Sync

In addition to a few bug fixes, we focused on making sure that Legend's sync to Google Calendar is very safe. It now prevents edits which would mess up events, and we added prompts to make sure you don't accidentally remove events.

A new feature, a per-calendar Editable setting in the Calendar section of the settings, lets you lock calendars so that Legend cannot modify them, or prompts before making changes.

This was a great idea and a highly requested feature on our forum which makes it much safer to sync work calendars with Legend.

Tag Coloring by Prefix

Another highly requested feature: there's a new page in the Display Settings where you can change the colors of tags. It works by prefix so you can create a colored tag hierarchy. For example you could set #home_ to be orange, so that all tags starting with #home_ like #home_chores would be orange. Some of our beta testers like to set a background color on the more urgent tags, with a text color for normal tags.

Inferred Hierarchy Experiment

We're working on a new concept where Legend can infer an outline hierarchy based on Heading size. It gives you all the power of collapsing, filtering, and zooming without even needing to indent. It's still a beta-only experiment, but it's almost done so you will see it released soon! If you'd like to try it now and help give us feedback, go here to join the beta.