Building Components Visually Using Draftbit

Piekarczyk traces a shift from assembly and punch cards to web languages, IDEs, and frameworks that made software easier to build. He argues that visual tools can extend that accessibility to app development, while giving engineers more time for complex work.

Piekarczyk introduces Draftbit as a visual app builder shaped by his team’s experience iterating on Orchard, a networking app built with Expo, GraphQL, and React Navigation. Users can arrange components, preview changes on connected devices, and export the source code. Draftbit’s Jigsaw system supports reusable colors, fonts, spacing, shadows, and typography.

Draftbit offers templates for common screens such as sign-in and profiles, so teams can reuse those instead of rebuilding them. Its visual navigation editor supports tab icons, colors, stacks, and onboarding routes, then generates an app navigator file. Users can also save a layout as a reusable component for use across screens and apps.

Piekarczyk describes configuring requests by entering a URL and method, previewing the response, and mapping data fields to components. He also demonstrates a GraphQL Explorer that generates queries from selected schema fields and connects them to app components. He names OneGraph, Amplify, and Hasura as compatible endpoints.

Piekarczyk says the team is working on a better configuration panel, keyboard shortcuts, and making accessibility easier to address early. Planned screen-building presets would arrange components automatically. He also presents Rentpit, an Airbnb-style starter app that users can preview, copy, customize, and export.