Changelog

• 🚀  6 new features

• 🏗  11 updates and improvements

• 🛠  7 bug fixes

🚀 Navigation Bars

The navigation bar component automatically syncs with the pages in your application, offers 3 pre-built navigation item styles, and supports vertical / horizontal layouts.

🚀 Dialogs & Modals

Dialogs offer four built-in presets, including: alert, confirmation, deletion, and edit. They can also be customized by either breaking out of an existing dialog component or creating a new one from scratch with the blank dialog.

🚀 New Component Variants in Command Bar

The Command Bar has new sections, the ability to seamlessly scroll between them without clicking, and more than a dozen new directly insertable node types including: page, image, video, audio, multiple chart types, email input, password input, configuration, secrets, and more!

🏗 Speed Improvements

We’ve made major strides in editor and deployed app performance when it comes to switching pages. In addition, page rendering speed when using an iterator or navigation bar has been cut by up to 60%!

🏗 Locked & Unlocked Columns for Data Tables

We’ve made changes under the hood to custom column configuration in data tables. Locked mode ensures everything stays the way you expect no matter what happens to the underlying data, while unlocked mode adjusts the table to match any underlying data changes.

Editor

Text Editors

• 🏗 Quickly jump to the relevant node from docked property editors with the new “jump-to” action button.

• 🏗 Built-in $csv and $crypto libraries now have typeahead support in TypeScript Server functions.

• 🏗 Improvements to prioritization of components in typeahead to favor those on the selected page.

Command Bar

• 🏗 We’ve made improvements to the search functionality of command bar to surface more relevant results.

Resources

• 🏗 Improvements to the test connection default, success, and error states for all resources.

Firebase

• 🛠 Fixed an issue causing erroneous connection errors when connecting to Firebase Realtime Databases.

Components

• 🛠 Fixed issues with width / height sizing on certain UI components.

Feed

• 🚀 A new feed component has been added to allow for display of time ordered statuses or updates.

Data Table

• 🚀 Text, Number, and Image column types have been added to the data table.

• 🚀 A “chromeless” variant of the data table with configurable headers, footers, and striping is now available.

Custom Components

• 🏗 One-click breakout of pre-built components for navigation bars, dialogs, and more.

• 🏗 Jump to the underlying component in one click from any instance in the editor.

• 🛠 Fixed an issue that prevented function properties on a custom component from being overridden.

Sign-in Component

• 🏗 When inserting a sign-in component, a one-time PIN resource is created if no auth resource already exists.

Pages

• 🏗 Improved page title placeholder auto-naming for better defaults in navigation bars.

Dialog

• 🛠 Fixed an issue causing Dialogs to not be centered in the viewport in a few specific circumstances.

Text

• 🛠 Fixed an issue where custom styles were not being properly applied to text nodes.

Image

• 🛠 Fixed an issue where custom styles were not being properly applied to image nodes.

Documentation

• 🛠 Updated broken links in the PostgreSQL and MongoDB configuration documentation.

• 🚀  3 new features

• 🏗  24 updates and improvements

• 🛠  10 bug fixes

🚀 Auto-generate charts, tables, and more from your data

Dynaboard now intelligently parses data loaded from connected APIs, databases, or SaaS applications. Once parsed, it automatically suggests preconfigured chart, table, statistic, or text components to add in a single click.

🚀 Navigation bar

We’re making multi-page applications even easier to build with a built-in navigation bar UI component. It automatically updates based on existing pages, is user authorization aware, and can be included in custom components to build even more complex headers or navigation UI.

🚀 Component connections

Quickly navigate between connected components to easily modify UI components, functions, resources, and configuration. Jump from a table to its connected function, a function to its resource, or a resource to its configuration (and back!), each in a single click.

Editor

• 🏗 Events can now be added to nodes from the right-click context menu.

• 🏗 We’ve made improvements to the algorithm for placing nodes in open spots on a page.

• 🏗 Layout controls have been streamlined with min & max now grouped with standard width / height controls.

• 🏗 The top section of the right side properties panel has been streamlined with inline editing of the node name now supported.

• 🛠 Fixed an issue causing toasts to not be centered in the editor UI.

Command bar

• 🏗 Resources can now be inserted into a project.

• 🏗 Support for fuzzy find and highlighting of component names when searching!

• 🏗 New UI components & resources can be inserted while using search.

• 🏗 Components are automatically selected and scrolled into view upon selection in the Command Bar.

• 🛠 Fixed an issue where search items didn’t scroll into view when using the arrow keys.

• 🛠 Fixed an issue where the Command bar wasn’t properly focused after clearing.

Text editor

• 🏗 Autocomplete suggestions now show the evaluation of the underlying node or property.

• 🏗 JSON5 formatting now supports proper indentation by default.

• 🏗 Docked editors are now full width.

• 🛠 Fixed an issue where multiple code editors could have selected text.

• 🛠 The copy button in a JSON tree view has been fixed.

UI components

Containers & Pages

• 🏗 We’ve made a ton of related improvements & fixes to stack mode involving resize directions, minimum width / height, and the editor itself to improve predictability when editing components & pages set to stack mode.

Iterator

• 🏗 Added support for box shadow and border radius on iterators.

Sidebar

• 🏗 Sidebars now have the option to “hover” over the primary page rather than cause a layout shift.

Custom Components

• 🏗 Functions can now be passed to custom components using the property editor UI.

Buttons

• 🛠 Button text label truncation issues causing sub-optimally clipped text have been fixed.

Resources, functions, and configuration

• 🏗 A new $app.name global has been added to allow programatic access to the application’s name.

All Functions

• 🏗 Improved error messages when there are unsaved changes.

• 🏗 Functions now display their parent node in selection drop-downs across the editor, including the command bar.

• 🛠 Functions are now set to “when called” by default rather than “automatically”.

Configuration

• 🏗 Improved error messages when there is a secret misconfiguration.

All Resources

• 🏗 The test connection button on resources now displays a more comprehensive and sticky errors panel rather than a toast.

User Info Resource

• 🏗 Sign-out function now supports a redirect path, so there is no need for an additional redirect function.

TS Client / Server Resources

• 🏗 TypeScript client is now a global library resource, and it no longer needs to be explicitly added to a project.

• 🛠 To reduce confusion, support has been removed for a common code section on the resources.

• 🛠 Fixed an issue with TS Server that caused $kv.list(pattern) to not respect the provided pattern when returning entries.

Browser Resource

• 🏗 The Browser resource is now a global library resource, and it no longer needs to be explicitly added to a project.

REST API Resource

• 🏗 Added support for PATCH requests.

GraphQL Resource

• 🛠 To reduce confusion, support has been removed for a base query on the resource.

• 🚀  3 new features

• 🏗  17 updates and improvements

• 🛠  20 bug fixes

Build faster with the new Command Bar

• 🚀 We’re just getting started with improvements to the way you insert and find UI components, resources, and functions to your application. Start browsing available UI components or search for any existing nodes by clicking the command bar at the top of the editor or using the CMD / CTRL + K hotkey. Expect a lot more improvements coming soon ✨

Use the editor with smaller screens and windows

• 🚀 We’ve completely overhauled how we display panels in the editor. In order to support smaller screens and windows, we’ve added the ability to collapse both the left and right panels as well as a new hover systems to support quicker navigation between different tabs and nodes.

Create advanced custom components easier with the new property definition system

• 🚀 We’ve made it easier to define custom component properties in the UI. Using the new properties panel on components, create a property, provide a display name, and define the type. Properties passed to components can be numbers, strings, objects, colors, or even functions!

Editor Updates

• 🏗 When hovering a cursor over UI Components, the component name, outline, and corresponding item in the component tree are now automatically shown and highlighted.

• 🏗 All panels now display the number of nodes (components, resources, functions, etc..) when collapsed.

• 🏗 Components with children (e.g. containers) are now expanded by default.

• 🏗 Added “jump to” buttons on all function selectors with a selected function.

• 🏗 Create functions directly from resources using the new functions panels. The new functions panel also takes the place of the original functions tab showing all functions connected to the selected resource.

• 🛠 Updated the canvas cursor icon for consistency with multiplayer editor experience.

• 🛠 Property labels are now fully clickable in the right side panel rather than just the property field.

• 🛠 Fixed issue where changing pages in the editor caused a scroll to the top rather than preserving scroll depth.

• 🛠 Toast notifications have been moved above the new floating action bar at the bottom of the editor canvas.

• 🛠 Fixed an issue causing there to be no active component or resource selection after using an undo action.

Text Editors

• 🛠 Page state variables are now shown as assignable values in code editors.

• 🛠 Fixed an issue causing an errant semi-colon to be placed in front of an array when auto formatting.

• 🛠 Autocomplete suggestions now support selection via a mouse cursor.

UI Components

Pages & Containers

• 🏗 Components placed into a page or container while in stack mode are now given 100% width or height in the opposite direction of the stacking context.

• 🏗 We’ve improved the severed Open Graph data for individual pages in deployed apps.

• 🛠 Grid and stack modes have been improved with stability enhancements when switching between modes.

• 🛠 Invisible UI components are now collapsed to take up no space. This leads to proper stack mode behavior with hidden UI components.

Inputs

• 🏗 Multiple improvements to input labels with new percentage widths, text alignment, and the default label values.

• 🏗 The dropdown default value selector is now a dropdown itself.

• 🏗 Left and right input accessory icons and labels now support their own on-click handlers.

• 🛠 Fixed the dropdown’s default font weight adjusting it to normal vs medium.

• 🛠 The dropdown no longer has default display values set that caused confusion when updating the underlying values.

Custom Components

• 🛠 Theme tokens are now properly supported in the background color of custom components.

Sign-In

• 🛠 Fixed an issue that caused the sign-in node to error in the editor when the browser window had been left open for extended periods of time.

• 🛠 Fixed an issue where a previous sign-in error wasn’t cleared when using the one-time PIN resource.

• 🛠 The PIN code UI now properly scales down on a mobile screen size.

Charts

• 🛠 Charts now have a default background color set.

Themes & Styling

• 🏗 The use of surface colors for UI components (e.g. surface.100, surface.200, etc... has been deprecated in favor of background using background.base, background.levelOne, background.levelTwo, background.levelThree for color levels. This was done to improve styling consistency in apps across dark mode and light mode.

• 🏗 A new dynaboardGray color is now supported with color levels .50, .100, .200, ..., .900.

All Components

• 🏗 <componentName>.children returns an array of the children of the referenced component.

• 🏗 $parent is a new global which resolves to the parent of the current component.

Resources & Functions

Configuration & Secrets

• 🏗 Numbers are now supported as a defined configuration type.

• 🏗 Secret configuration now supports a visible fallback if no secret is provided.

Postgres Resource

• 🏗 Common connection error messages have been improved for faster configuration.

OpenAPI Resource

• 🛠 Fixed an issue where headers and query params were not being appropriately passed in OpenAPI resource functions.

MySQL Resource

• 🛠 Multiple distinct SQL statements are now correctly supported.

All Functions

• 🛠 Fixed an issue with functions where using both client-side {{ }} and server-side ${{ }} interpolation in the same function caused an error.

• 🚀  9 new features

• 🏗  27 updates and improvements

• 🛠  5 bug fixes

Edit & Test with the Floating Action Bar

• 🏗 Select & Interact modes are now Edit & Test! In addition we’ve moved all of the common editor tool actions to a floating action bar at the bottom of the editor screen. There you can find the Edit / Test mode switcher as well as the selectors for testing different screen sizes and color modes.

Headers, Footers, and Sidebars

• 🚀  Pages support new layout system that allows for consistent headers, footers, and left or right sidebars using custom components. Once created and added to a page, side bars can also be programmatically opened and closed using the $currentPage.leftSidebar and $currentPage.rightSidebar properties by setting them to either true or false.

Performance Improvements

• 🏗  Application load times when deployed have been dramatically improved (with more to come) with a focus on improving Lighthouse scores.

• 🏗  Function execution times for most resources have been improved with a 2x improvement for the TS Server, and frequently accessed functions seeing up to 3x faster responses.

• 🏗  Editor responsiveness has been dramatically improved when switching pages and rendering iterators.

• 🏗  KV Store has also seen performance improvements, and now returns up-to 3x faster.

Editor Invite Links, Authorized Domains, and Workspace / Project Invitations

• 🚀 Configure your shared workspace with an authorized domain to share access with your coworkers using a dedicated link. No more need to invite the entire team one by one. However, when you do need to invite users individually we’ve also overhauled the invitation system to show invitations that have yet to be accepted.

Configuration and Secrets

• 🏗 Application configuration and secrets now have their own sidebar panel with a newly streamlined flow for creation, deletion, and configuration of existing secrets.

• 🏗 Changes to configuration values no longer require a refresh to be reflected in the app while using the editor.

Custom Sub-domains

• 🚀 Support for custom sub-domains (e.g. application.yoursite.com) is now available on all paid plans.

Editor

• 🏗 Clicking on another user’s avatar in the toolbar will now jump you to their current selection.

• 🛠 Auto completion now opens when starting an interpolation by writing {{.

UI Components

Custom Components

• 🏗 They now default to a fixed number of rows rather than a fixed row height to better support responsive designs.

• 🏗 Support for passing functions through $props into components from the page on which they’re being rendered.

Text

• 🏗 The default markdown & link styling has been improved in text component.

Data Tables

• 🚀 CSV and JSON download support has been added to data tables. Enable to allow users the ability to download the data backing a data table for easy analysis in other tools.

• 🚀 A new link column type enables support for linking to any URLs from a data table (e.g. a link to a user’s website).

• 🚀 A new button column type allows for additional custom actions to be taken on items in a data table (e.g. deleting the item, or copying a row to the clipboard) beyond the single event provided by clicking the row itself.

Inputs

• 🏗 Inputs now support left and right accessory icons for improved UI styling.

• 🏗 Inputs with labels now support configurable label widths for better custom layout support.

Sign-in Widget

• 🛠 The sign-in widget has been updated with more consistent styling and error handling.

Iterators

• 🏗 Users can now jump directly to the underlying custom component backing an iterator from the iterator properties panel.

Containers

• 🏗  Like custom components containers as default to a fixed number of rows rather than a fixed row height to better support responsive designs.

• 🛠  Components in containers with stack mode enabled properly support % widths and heights. Also, more reliable overall.

Charts

• 🏗 Charts now automatically detect and switch time formatting on the x axis when appropriate.

Resources & Functions

• $crypto

  • 🏗 $crypto.random is now backed by the crypto.getRandomValues method for more cryptographically secure random number generation.

  • 🏗 $crypto.randomUUID now provides an easy way to generate random UUIDs.

  • 🏗 All features now supported in TS Server as well as TS Client functions.

• $kv

  • 🏗  Now supports types and typeahead when programmatically accessing the key / value store.

• $delay

  • 🏗  Setting a delay is now supported on TS Server in addition to TS Client.

• _.

  • 🏗  We now support the full lodash library inside of TS Server and TS Client functions.

• $csv

  • 🚀 CSV parsing is now provided as an option in TS Client and TS Server.

• TS Client

  • 🏗 btoa & atob functions are now supported in TS Client.

  • 🛠  setTimeout when used with a promise has been fixed.

  • 🏗 $currentPage

    • .query object contains the parsed query string of the URL used to load the page.

    • .params object contains the parsed URL path as defined using a : in the ExpressJS routing style /page/:firstParam/:anotherParam

  • 🏗 $app

    • .colorMode can be used to determine if the users current colorMode is light or dark.

    • .baseURL provides the current URL where the application is being run.

    • .viewportWidth & .viewportHeight provides the current viewport width / height in pixels and can be used in conjunction with $breakpoint to build responsive UIs.

  • 🏗 $breakpoint

    • Provides Desktop, Laptop, Tablet, Mobile breakpoints at 1280, 1024, 768, and 320px.

• 🛠  Fixed an issue causing infinite loops when using interpolation {{ }} in certain functions.

• Function Arguments

  • 🚀 Arguments are now supported between all functions / resource types (except Python Server). Arguments can be used inside functions by using $args[I] where I is the 0-index of the argument passed into the function (e.g. $args[0] is the first argument).

• Browser

  • 🏗 Soft refreshing of the current page is now supported as a browser function action.

• 🚀  7 new features

• 🏗  27 updates and improvements

• 🛠  9 bug fixes

Authentication

• 🚀 Groups Based Authentication

  • We’ve added support for Google Workspace Groups and GitHub Teams to automatically restrict applications or pages to certain teams or individuals based on existing SSO group membership.

• 🚀 One-Time Pin Email Authentication

  • Quickly secure your applications without having to integrate a 3rd-party SSO provider. Start building an authenticated private application in less than a minute with our Private App Boilerplate template.

• 🏗 We made additional visual improvements to the authentication rule building UI to both speed up development and make it easier to spot / correct mistakes.

• 🏗 Using a new toggle on the built-in Dynaboard console, selectively enforce authentication rules in the editor to speed up application development and testing.

🚀 Environments

On paid plans, we now offer environments support to enable software development best practices when using Dynaboard. All workspaces come with a production environment, and a number of additional environments (e.g. staging, development, etc…) can be configured based on the workspace plan type.

Using environments, every resource in your applications can be configured to swap between databases or API endpoints at the click of a button. Build with confidence knowing you can test every change before deploying it to production.

🚀 Project Revisions

If you make a mistake or discover a bug, use automatically (or manually) created revisions to revert your application to an earlier version. Revisions are supported in applications on all workspaces and automatically save the change history of your applications, so you don’t have to worry about losing unsaved changes.

🚀 Audit Logs

See the full log history of your applications. We keep track of every edit, function invocation, login, and other significant event so you can easily identify what happened (and when) in your applications. Audit logs are available on all paid workspaces with additional history being provided to higher tier plans.

🚀 Template Gallery

We’ve launched a new template gallery, as well as our first application boilerplate, to inspire you with whats possible in Dynaboard and help you build applications even faster than before.

🏗 Performance Improvements

We made performance improvements in multiple areas by reducing application size, tweaking the Dynaboard VM, and streamlining the editor. The following areas have seen performance improvements over the last 8 weeks:

• Initial load times of deployed applications

• Initial load times of the editor

• Function call latency for server-side functions

• UI responsiveness when toggling between edit and view modes

Editor

• Component Properties

  • 🏗 Component properties now distinctly show if they have an override value, allow interpolation (i.e. using {{ }}code to dynamically set the value), or are available to be edited in an expanded sidecar editor.

• Search Engine Indexing with Sitemap.xml

  • 🏗 We’ve improved the generation of a project’s sitemap.xml. Individual pages can now also be excluded from the application’s sitemap in the particular page’s properties panel.

• Omnibar

  • 🏗 The omnibar is now pre-populated with recently selected components when opening an application.

• Code Editors

  • 🏗 JSON5 syntax is now fully supported by the code editor.

• Hotkeys

  • 🏗 Added support for ALT/OPT + [1-9] or ALT/OPT + +/- to navigate between docked property editors.

• Miscellaneous

  • 🏗 Associated resource icons have been added to functions to improve the editing experience with large numbers of functions.

  • 🏗 On deploy developers are now automatically redirected to the page they were viewing in the editor.

  • 🏗 Improved selection state of properties panels to make it more clear which panel is selected.

  • 🏗 Sidecar editors are now supported for nested propertied (e.g. data table or chart column properties).

  • 🏗 Right clicking on the page in the editor now allows a component to be inserted in that location.

  • 🛠 Pushed bug fixes to the editor that addressed an issue where the incorrect component or page was selected when changing, refreshing, or deleting pages.

  • 🛠 Fixed an issue that caused the components panel to not scroll with large numbers of components.

  • 🛠 Improved handling around a project’s index page that help avoid accidentally breaking an application.

  • 🛠 Addressed issues where paste didn’t work as expected.

  • 🛠 Resolved an issue that caused the user not to be able to change pages in the editor if the page had previously been changed by a browser resource navigation function.

Components

• Custom Components

  • 🏗 Custom components now support passing functions into their properties. These functions can also call other functions outside of the scope of the component. (e.g. to trigger actions on a page)

• Data Tables

  • 🏗 Buttons (with attached to functions) are now a supported data table column type.

  • 🏗 Minor tweaks and fixes to improve the default look and feel of the data table.

  • 🛠 Fixed a bug causing incorrect page sizes when paginating data in the data table.

• Charts

  • 🏗 Stacked column (vertical bar) charts are now supported.

• Text

  • 🏗 Text nodes now default to middle vertical align.

  • 🏗 Double clicking on text nodes now allows the text to be edited.

• Dropdown

  • 🏗 The initial selected value of a dropdown can now be dynamic with interpolation (i.e. double curly syntax {{ }} ) support.

  • 🛠 Fixed an issue where the dropdown wasn’t being cleared.

  • 🛠 Fixed an issue where clearing the dropdown could cause the application to crash in certain instances.

Resources

• GraphQL

  • 🏗 The full error body is now returned when a GraphQL function experiences an error.

• PostgreSQL

  • 🏗 The PostgreSQL resource now supports multiple SSL Modes including Required, Verify CA, and Verify Full.

• TypeScript

  • 🏗 Support for setTimeout, clearTimeout, setInterval, and clearInterval has been implemented.

• TypeScript Server

  • 🏗 Passing function arguments is now supported between Typescript Server functions. Arguments can be passed normally function1("argument0") and accessed inside the function using the new $args array. (e.g. $args[0] == "argument0" with the prior function call of function1("argument0") )

Applications

• 🚀 Dynaboard applications are now embeddable into other webpages using an <iframe> tag.

Portal

• 🏗 Workspace deletion is now supported in the general settings tab on a workspace.

• 🏗 Usage data is now up-to-date and available in the billing section of the dashboard for premium users, standard users, and server-side function calls.

• 🏗 Adding a payment method is now supported on workspaces with Individual, Team, and Business plans.

• 🛠 Fixed UI issues related to login when using Dynaboard on mobile.