ecov1.0.0 — .stngr

HTML + CSS + JS
+ React in one file

Stingray fuses everything you love about web development into a single, readable language. Write components. Ship to any browser.

arrow_downward Get started play_circle See example

terminal Stingray

❯ stingray init my-app
  Creating "my-app"...
  check_circle Project structure created
  check_circle Starter files generated
  rocket_launch Ready to go
❯ stingray dev
  public localhost:8080
  bolt Hot reload ON
❯ 

Features

Everything you need.
Nothing you don't.

One language. One file. Full web stack.

rocket_launch

One File

HTML, CSS, JavaScript, and React fused into a single .stngr file. No context switching.

bolt

Instant Dev Server

Hot reload, auto-open browser, zero config. Run stingray dev and go.

palette

Material Web

20+ built-in Material Design components. Buttons, cards, dialogs, tabs, drawers.

hub

Fetch & API

Built-in fetch, state management, filesystem API, and events. No dependencies needed.

language

Web Compatible

Compiles to plain HTML/CSS/JS. Works with any library, framework, or CDN.

settings_input_component

System Integrated

File associations, context menus, VS Code extension, CLI shortcuts. Works everywhere.

Example

Write less. Ship more.

A complete component with HTML, CSS, JS, and React — in one file.

edit Stingray (.stngr)

// component.stngr

component Dashboard {
  state {
    users = [];
    loading = false;
  }

  template {
    <div class="dashboard">
      <h1>Users</h1>
      <mdc-button @click="loadData">
        Refresh
      </mdc-button>
      <ul>
        #for user in users
          <li>{user.name}</li>
        #endfor
      </ul>
    </div>
  }

  script {
    async function loadData() {
      const res = await fetch('/api/users');
      users = await res.json();
    }
  }

  style {
    .dashboard {
      padding: 24px;
      max-width: 800px;
      margin: 0 auto;
    }
  }
}

download Compiles to

html HTML

<!DOCTYPE html>
<html>
<head>
  <style>
.dashboard {
  padding: 24px;
  max-width: 800px;
}
  </style>
</head>
<body>
  <div class="dashboard">
    <h1>Users</h1>
    <button>Refresh</button>
    <ul></ul>
  </div>
</body>
</html>

javascript JavaScript

async function loadData() {
  const res = await fetch('/api/users');
  users = await res.json();
}

web React

export function Dashboard(props) {
  const [users, setUsers] = useState([]);
  return (
    <div className="dashboard">
      <h1>Users</h1>
      <button onClick={loadData}>
        Refresh
      </button>
    </div>
  );
}

Install

Up and running in 4 steps.

No config. No boilerplate. Just works.

Install Node.js 18+

Download from nodejs.org

Install Stingray globally

Sets up CLI, file associations, and VS Code extension

$ npm install -g stingray-lang

Run the installer

Configures system integration

$ stingray --install

Create your first project

Done. Start building.

$ stingray init my-app
$ cd my-app
$ stingray dev

CLI

Commands & shortcuts.

Everything you need, nothing you don't.

add_task stingray init

Create new project

play_arrow stingray dev

Start dev server

build stingray build

Production build

science stingray compile

Compile one file

play_circle stingray run

Compile & execute

add_circle stingray new

Create component/page/hook

shortcut sr

Shortcut for stingray

tag stngr

Alias for stingray

HTML + CSS + JS+ React in one file

Everything you need.Nothing you don't.