Maya ChenProduct designer
App BuilderVisual development, your way
Build your app.
Make it yours.
Bring your app idea into focus. Shape screens visually, connect your data and give each interaction a purpose. Preview the experience, refine the details and publish when you are ready.
One account. Your entire workflow.
From first screen to working flow
A little idea, taking shapeInteractive example
North StudioExample app
Local previewVisual canvasDirectory
North StudioTeam
GOOD PEOPLE. SHARED IDEAS.
A home for your team.
Meet the people behind the work.
Selected cardRadius 16Layout Vertical
Illustrative workspace. No project is created or published.
APPSTRUCT APP BUILDERYour idea starts taking shape.
Visual screen editorData and actionsPreview before publishing
MAKE THE FIRST SCREEN YOUR OWN
Build the interface you have in mind.
Start from a blank screen or an available template. Arrange components, refine the styles and move between device views as the experience takes shape.
- Screens, components and layers in a visual editor
- Shared colors and typography for a consistent look
- Mobile, tablet and desktop styling controls
North Studio / Screen designInteractive example
NORTH STUDIOMobile layout example
Meet the team
A small team, with room for big ideas.
Sam RiveraProject lead
Try changing the heading, palette and layout. This illustrates editing controls; it does not create an app.
GIVE THE INTERFACE SOMETHING TO WORK WITH
Connect the records your app runs on.
Create AppStruct tables or connect a Supabase project. Define the fields your app needs, then connect the interface and its actions to the right data.
Example project recordsInteractive example
ProjectStage
Website refreshOwner: AlexIn progress
Client onboardingOwner: MayaPlanned
Launch notesOwner: AlexDone
3 example records shown.
Fictional records. These changes stay in the demo and never reach a database.
Structure the data
Create tables, typed columns and relationships for the records your app will use.
Bring in a starting dataset
Import supported CSV, Excel or Google Sheets data into AppStruct tables. Importing is separate from continuous syncing.
Work with a connected service
Configure HTTP requests and map the supported inputs and responses for your API.
FROM GOOD-LOOKING SCREENS TO USEFUL INTERACTIONS
Give each click a next step.
Configure what happens when a person clicks a button or opens a page. Connect navigation, conditions, data operations and feedback to make the experience respond.
- Navigate between screens and show or hide elements
- Read and change records through configured actions
- Set up sign-in forms and requests for your app
Actions run from app interactions. Configure the data, permissions and error handling for each flow before publishing.
Click → condition → feedbackInteractive example
WHENExample button is clicked
CHECKCode equals DEMO
YESShow a thank-you message
NOShow a helpful prompt
Try the input to follow a branch. No access code is sent or stored.
A simplified local example of a configured condition, not a live form or authentication check.
A STARTING POINT, WITH ROOM FOR YOUR JUDGMENT
Use AI to get the first version moving.
Describe a component or page when AI generation is available. Review the result in the builder, refine the design and configure the behavior your app needs.
Describe the starting point
Give the generator a focused description of the page or component you want.
Shape the result
Review the generated layout or component and keep working in the editor.
Connect and test
Set up the data and actions. Check the experience before requesting a build.
AI availability depends on your plan and the generation service. Generated content still needs review and configuration.
Prepared AI starting-point examplesInteractive example
A place for your community
A member directory with a heading, profile cards and a clear next action.
Prepared example · not live generation
Load a prepared example, then change its heading.
This demo loads prewritten content. It does not call an AI service or create a screen in your account.
A MORE CONSIDERED PATH TO RELEASE
Preview the experience. Prepare the release.
Try your screens and configured interactions in preview. Use that review to catch the details that matter before requesting a publishing build.
- Preview screens and test the configured actions
- Follow web build status and publishing history
- Prepare Android or iOS with the required setup
Publishing options and build limits depend on your plan and configuration. Review the current requirements before planning a release.
Your release review / Local exampleInteractive example
Example address formatyour-app.appstruct.app
Publish to an AppStruct web address.
Request a web build and follow its status and history. Your project is hosted on its AppStruct subdomain when the build succeeds.
Project setup and available build allowanceTRY A SAMPLE REVIEW CHECKLIST
0 of 3 example review steps checked.
This checklist illustrates a review routine. It does not validate your app, start a build or publish anything.
START WITH A USEFUL FIRST VERSION
A clearer path
from idea to app.
Your first version does not need every feature. Start with a focused experience, then shape the next step in the same workspace.
Create your first appMake the everyday workflow easier to use.
Build around the records and actions your team works with, using a clear screen for each step.
- 01Choose the fields and records you need.
- 02Design the screens that make them useful.
- 03Configure and test each interaction.
PUT IT INTO PRACTICE
A guide for your next step.
THE APPSTRUCT WORKSPACE
Your ideas have a new home.
App Builder
Build apps visually, with data and actions
Drive
A home for your team’s files
Docs
Turn ideas into shared documents
Sheets
Make your data work for you
Slides
Give your ideas a clear story
Board
A visual space for your ideas
Meet
Bring your team into the room
Calendar
Make time for what matters
Chat
Keep conversations moving
CRM
From first contact to closed deal
Social
Plan your next great post
SEO
Find your next growth opportunity
The no-code builder you know. A whole workspace to discover.
Do I need to write code to get started?
Start with a blank app or an available template, then arrange screens and components in the visual editor. Add text, forms, media and navigation, and adjust their styles. Templates give you a starting layout; connect the data and configure the actions your app needs before treating it as a finished product.
Can I adapt the same app for different screen sizes?
Yes. Switch between mobile, tablet and desktop views, then adjust the selected element’s styles and visibility for each device range. Shared colors and typography help keep the design consistent. Preview and test your layouts at the sizes your audience uses before publishing.
Where can my app’s data come from?
Use AppStruct tables or connect an existing Supabase project, then map records and fields to your interface. AppStruct table tools also support CSV, Excel and Google Sheets imports, subject to the source’s access and supported format. An import brings data into a table; it is not a continuous synchronization with the original spreadsheet.
How do I make buttons and pages do something?
Configure actions for clicks and page loads, including navigation, showing or hiding elements, database operations and HTTP requests. Map input values into requests and map supported responses back into the interface. Connections, permissions and response formats still need to be configured and tested for your particular service.
What can AI help me create?
When available for your plan and the connected generation service, AI can prepare a component or page from a written description. Generated components can be previewed and their React code edited before adding them; generated pages are added to the editor for further work. Review the layout, behavior and data connections yourself. Generation does not publish the app.
Can I add email and password sign-in?
Yes. Configure registration and authentication actions with AppStruct or a connected Supabase backend, then map the email and password inputs from your form. A login template supplies the interface, rather than a completed authentication setup. Test registration, sign-in, sign-out and access to the relevant data before publishing.
How do previewing and publishing work?
Use preview mode to try your screens and configured interactions before requesting a build. Web publishing queues a deployment to the project’s AppStruct subdomain and shows build history and results. Android and iOS publishing options require an eligible active plan and the relevant configuration or store credentials. Build completion and app-store approval are separate steps.
Can I build with teammates?
Invite people to your project as Editors so they can work on its content and settings. Collaboration features show connected teammates and share editor updates when the service is available. The editor saves project changes through server requests, so work online and check any reported save errors.
Where can I find the current plans and limits?
Review the pricing page for current plan features and limits, including publishing and AI availability. View pricing →
APPSTRUCT APP BUILDER