The Intuitive Full-Stack JavaScript Framework

Semantq combines declarative syntax with powerful tooling to streamline web, mobile, and embedded development. Get started with one command and build faster than ever.

Get Started Explore Features
terminal
$ semantq create myapp
# Creates a new Semantq project
$ cd myapp
$ semantq dev
# Starts development server

Powerful Features

Everything you need to build modern, full-stack applications

One-Command Setup

Get started instantly with semantq create myapp. No complex configuration needed - just start building.

File-Based Routing

Automatic route detection. Just create files in your routes directory and Semantq handles the rest.

Component Composition

Flexible slots (default and named) for building reusable components that work seamlessly with NPM modules.

Full-Stack Resources

Generate models, controllers, services, and routes with one CLI command for rapid backend development.

SemantqQL

Built-in query language for CRUD operations, API fetching, and form handling with minimal boilerplate.

SEO Optimized

Automatic sitemap generation and SEO-friendly architecture out of the box.

Powerful CLI

Automate your workflow with Semantq's command line tools

Create a new project

semantq create myapp

Scaffolds a new Semantq project with all necessary configuration

Generate full-stack resources

semantq make:resource Product

Creates Model, Controller, Service, and Routes for a Product resource

Create a new route

semantq make:route about

Generates src/route/about with all necessary files

Add Tailwind CSS

semantq install tailwind

Configures Tailwind CSS with optimal Semantq settings

Declarative Syntax

Intuitive, expressive code that's easy to write and maintain

File-Based Routing

// File: src/routes/products.sq
<h1>Our Products</h1>
<ProductList />

Just create files in your routes directory. Semantq automatically handles routing with no additional configuration.

Component Composition

// Parent component
<Card>
    <h2>Card Title</h2>
  Default slot content
</Card>

Flexible slots (default and named) make component composition intuitive and powerful.

SemantqQL

// Fetch products from API
const { data, error } = smQL(`
  GET /api/products
  WHERE price > 100
  SORT createdAt DESC
`)

SemantqQL provides a clean syntax for data fetching and manipulation with built-in caching.

Reactive State Management

Simple yet powerful state handling built into the framework

$state

const count = $state(0)

<button @click={() => count++}>
  Clicked {count} times
</button>

Reactive state variables that automatically update the UI when changed.

$derived

const price = $state(100)
const tax = $state(0.2)
const total = $derived(
  () => price * (1 + tax)
)

Computed values that automatically update when dependencies change.

$effect

const searchQuery = $state('')

$effect(() => {
  if (searchQuery.length > 2) {
    fetchResults(searchQuery)
  }
})

Run side effects in response to state changes with automatic cleanup.

SEO Optimized

Built-in features to help your site rank better

Semantq automatically generates sitemaps and optimizes your site structure for search engines. The framework's architecture ensures your content is easily discoverable by crawlers while maintaining excellent performance.

Automatic Sitemaps

Dynamic sitemap generation based on your routes

Performance Optimized

Fast page loads and efficient rendering for better rankings

Mobile Ready

Responsive by default with mobile-first indexing in mind

Ready to Build with Semantq?

Join developers who are building faster with our intuitive framework.

Get Started