Skip to main content

Quickstart Guide

Get your first INSTROC app up and running in under 5 minutes.

Prerequisites​

  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • An INSTROC account (sign up here)

Step 1: Create a New Project​

  1. Log in to instroc.app
  2. Click New Project on your dashboard
  3. Choose how you want to start:
    • Blank Canvas - Start from scratch
    • Template - Begin with a pre-built design
    • AI Description - Describe what you want to build

Step 2: Describe Your App​

If starting with AI, enter a description of what you want to build:

Create a personal portfolio website with:
- A hero section with my name and tagline
- An about section with my bio
- A projects grid showing my work
- A contact form
- Modern, minimal design with dark theme

Click Generate and watch as INSTROC creates your app.

Step 3: Preview Your App​

Your app appears in the live preview panel on the right side of the editor. Changes you make are reflected instantly.

tip

Use the device toggle buttons to preview how your app looks on mobile, tablet, and desktop.

Step 4: Iterate with AI​

Continue refining your app through conversation:

Add a skills section with progress bars for:
- React: 90%
- TypeScript: 85%
- Node.js: 80%

Or be more specific about styling:

Make the hero section full-height with a gradient
background from purple to blue

Step 5: Edit Visually​

Switch to the visual editor to make precise adjustments:

  1. Click any element to select it
  2. Use the properties panel to adjust:
    • Text content
    • Colors and typography
    • Spacing and sizing
    • Responsive behavior

Step 6: Deploy Your App​

When you're happy with your app:

  1. Click the Publish button in the top right
  2. Choose a subdomain or connect a custom domain
  3. Click Deploy

Your app is now live!

Next Steps​

Now that you've created your first app, explore more:

Example Prompts to Try​

Landing Page​

Create a SaaS landing page for a project management tool with:
- Hero with headline, description, and CTA button
- Features section with 3 cards
- Pricing section with 3 tiers
- FAQ accordion
- Footer with links

Dashboard​

Build an analytics dashboard with:
- Sidebar navigation
- Header with user menu
- Stats cards showing key metrics
- Line chart for revenue over time
- Recent activity table

E-commerce​

Create a product catalog page with:
- Grid of product cards with images
- Filter sidebar for categories and price
- Search bar
- Add to cart functionality
- Responsive design