Developer FAQ

This page answers common questions developers have when working with exported projects from Siteplay.ai.

What does Siteplay.ai export?

Siteplay.ai exports complete frontend website projects including:

• Pages
• Sections
• Components
• Layouts
• Assets
• Styles
• Design systems
• Configuration files

The exported project is intended to be production-ready and developer-editable.

Which frameworks are supported?

Siteplay.ai supports exporting projects in popular JavaScript frameworks including:

• React
• Next.js
• Vue
• Nuxt
• Astro React
• Astro Vue

Is the exported code editable?

Yes.

The exported code is fully editable and intended for developers to customize further.

You can:

• Modify components
• Replace sections
• Add APIs
• Connect databases
• Integrate CMS platforms
• Add authentication
• Extend business logic

Siteplay.ai focuses on generating a clean starting point rather than locking developers into a proprietary runtime.

Is the code production-ready?

The exported code is designed to be production-friendly and structured using modern frontend development practices.

However, developers should still:

• Review generated content
• Optimize assets if necessary
• Configure SEO metadata
• Connect backend services
• Perform testing before deployment

Project Structure

How are sections mapped in the exported code?

Each section inside Siteplay.ai typically maps to a reusable frontend component.

Example:

components/
  sections/
    Hero.tsx
    Pricing.tsx
    FAQ.tsx

The visual structure inside the editor directly corresponds to component composition in the exported project.

How are pages mapped?

Pages created during the planning workflow become actual route/page files in the exported project.

Example:

# Example for Nextjs
app/
  pricing/page.tsx
  about/page.tsx

Or:

pages/
  pricing.tsx
  about.tsx

depending on the framework.

Can I rename or move components after export?

Yes.

The exported project behaves like a normal frontend codebase.

You can freely:

• Rename files
• Move components
• Create new folders
• Refactor architecture
• Split components
• Add custom modules

How are layouts handled?

Layouts are usually organized at the framework level.

For example:

layouts/FullPageLayout[.tsx/.vue/.astro]

Design System Questions

How are design systems exported?

Design systems are usually exported as:

• CSS variables
• Global stylesheets
• Shared utility classes
• Theme configuration files

Example:

:root {
  --primary: #6366f1;
  --secondary: #0f172a;
  --accent: #14b8a6;
}

These variables are then used across components and sections.

Can I change colors after export?

Yes.

You can update the design system directly inside the exported CSS or theme files.

Changing CSS variables automatically updates the entire website theme.

Are typography settings exported too?

Yes.

Typography settings are typically exported into global stylesheets.

Example:

body {
  font-family: Inter, sans-serif;
}

Headings, paragraph styles, and spacing systems are also included.

Can I integrate Tailwind CSS or my own design system?

Yes.

Developers can replace or extend the exported styling system with:

• Tailwind CSS
• CSS Modules
• SCSS
• Styled Components
• Chakra UI
• Material UI
• Internal design systems

The exported code is framework-native and does not lock you into a specific styling architecture.

Working With Sections

Can sections be reused across pages?

Yes.

Sections are designed to be modular and reusable.

You can import the same section into multiple pages.

Example:

import HeroSection from "@/components/sections/HeroSection";

This helps maintain consistency across websites.

Can I create new sections manually?

Absolutely.

You can add new custom sections after export just like any normal frontend project.

Example:

components/sections/
  CustomAnalyticsSection.tsx

Can I remove unused sections?

Yes.

Unused sections and components can safely be removed from the codebase.

Siteplay.ai does not require a proprietary runtime dependency for generated sections.

Content & Assets

Where are uploaded images stored?

Uploaded assets are typically exported into public/static asset directories.

Example:

public/
  images/

You can reorganize assets after export if needed.

Can I replace images after export?

Yes.

Images can be replaced manually inside the asset folders or component props.

Is CMS integration supported?

Yes.

Developers can integrate:

• Headless CMS platforms
• APIs
• Markdown systems
• Databases
• Dynamic content sources

The exported project is fully extendable.

Popular integrations may include:

• Sanity
• Contentful
• Strapi
• Supabase
• Firebase
• Custom APIs

Deployment Questions

Can I deploy exported projects anywhere?

Yes.

Exported projects can typically be deployed on platforms like:

• Vercel
• Netlify
• Cloudflare Pages
• AWS
• DigitalOcean
• Traditional VPS hosting

Deployment depends on the selected framework requirements.

Are SEO features included?

Siteplay.ai structures projects to be SEO-friendly.

However, developers should still review and customize:

• Meta tags
• Open Graph tags
• Structured data
• Sitemap generation
• Robots.txt
• Performance optimizations

Is responsive design included?

Yes.

Generated websites are designed to be responsive across:

• Desktop
• Tablet
• Mobile

Developers can further customize breakpoints and layouts after export.

Workflow Questions

How do workflows connect to exported code?

The workflows directly map to frontend architecture.

Planning Workflow   → Pages & Routes
Prototype Workflow → Sections & Components
Design Workflow    → CSS & Theme System

This structure helps developers quickly understand and continue development after export.

Can I continue using Siteplay.ai after modifying exported code?

Typically, exported projects become standalone frontend projects after export.

Developers can continue development independently using their preferred tooling and workflows.

Conclusion

Siteplay.ai is designed to generate developer-friendly frontend projects that mirror modern application architecture.

The exported codebase is intended to be:

• Readable
• Modular
• Reusable
• Scalable
• Easy to customize

Whether you are building a startup MVP, marketing website, SaaS platform, or client project, Siteplay.ai helps accelerate frontend development while keeping developers in control of the final codebase.