// Reference

YR SYNTAX
REFERENCE.

Yr is a DSL (domain-specific language) for structuring full-stack projects. You write HTML, CSS, JS, Python, and Bash as you normally would — Yr just gives them a place to coexist in a single .yr file, separated by section markers.

Early stage: no variables or loops yet. What's here works and is used in production.

HOW IT WORKS

A .yr file is a collection of sections. Each section starts with a two-character marker and contains the code for that layer of your project. The Yr compiler reads each section and outputs the appropriate files.

hello.yr — a complete page in one file
>< ← HTML goes here
_ h1
  Hello world
 
## ← CSS goes here
body { background : #000 ; color : #fff ; }
 
@@ ← JS goes here
console . log ( 'running' );
 
&& ← backend goes here
app . get ( '/' , (req, res) => res. render ( 'hello' ));
 
** ← deploy scripts go here
___deploy
npm start
SECTIONS
>< Body HTML

Content placed inside <body> , before the footer section. Use the _ element selector to place HTML tags and wrappers.

><
_ .container
 _h1
    My page
  _p
    Some text here
>> Head HTML

Content placed inside <head> . Use for meta tags, external stylesheets, fonts, etc.

>>
_ meta name= "description" content= "My app"
_ link rel= "stylesheet" href= "https://..."
## CSS CSS

Standard CSS. Injected as a <style> block before </head> . Write any valid CSS.

##
body { margin : 0 ; font-family : sans-serif ; }
.container { max-width : 800px ; margin : 0 auto ; }
@@ Frontend JS JavaScript

Client-side JavaScript. Placed after </body> as a <script> block. Runs in the browser.

@@ ← main body
document. querySelector ( 'h1' ). style . color = 'red' ;
Sub-blocks: use @> for JS placed before @@ , and @< for JS placed after.
&& Backend JS Node.js

Server-side Node.js logic. Compiled as app.js . Write Express routes, middleware, or any server code.

&&
app . get ( '/' , (req, res) => {
  res. render ( 'index' );
});
Sub-blocks: &> before, &< after the main && block.
@& Shared JS JavaScript

Logic shared between frontend and backend. Placed before both &> and @> blocks.

** DevOps Bash / JS / Python / ...

Scripts for build, serve, and deploy stages. Use ___stageName to specify which stage. Default is build . Use #!language to specify which language. Default is bash .

**
___build
npm install && npm run build
 
___serve
node app.js
 
___deploy
pm2 restart app
Known stages: build , serve , deploy . build runs when yr.build is called.
== Pixel HTML

Placed inside the HTML output before <head> . Useful for tracking pixels and doctype overrides.

<> Footer HTML

Placed inside <body> , after the main body section. For footer HTML.

<< Scripts HTML

Placed after </body> . For inline <script> blocks that should load last.

COMPONENTS
++ Wrapper Component

Defines the structure of a reusable wrapper file. Use ___ to mark where a child element will be inserted. If no ___ , children append to the last root element.

Ui/Card.yr — a reusable card wrapper
++
_ .card
   _ .card-body
     ___ ← children go here
!! Import Module

Imports another .yr file. Wrappers must be capitalized. Use !! @wrapper for the special wrapper macro.

!! Ui/Modal
!! Ui/Card
!! @wrapper ← special wrapper macro
_ Element HTML

Places HTML elements or wrapper components. Use inside HTML sections ( >< , ++ ). Supports standard HTML tags and wrapper paths.

← Standard HTML tag
_ div
_ .my-class ← with class
_ span
  inline text
 
← Wrapper component
_ ui/card
_ ! ui/modal ← ! ignores HTML sections
%% Macros Reusable

Reusable functions available across all sections. Define with _@name() , end with @} . Variables prefixed with # . Use ___ for code insertion.

%%
_@button (#label, #color=blue) {
   _ button.btn.btn-#color
     #label
     ___ ← code goes here
@}
If a variable is not passed, its default is false .
MODULE SYSTEM
-- NPM Package

Install npm dependencies at build time. Comma-separated list.

-- express,crypto,dotenv
[[ Wrapper Variables Config

Declare wrapper-level variables. Must be on the first line of the file.

[[ attributes = ["color", "id"] ;
icon = "alert"
Known variables: icon (Bootstrap icon name) · attributes (list of wrapper attributes) · disable_children (toggle child support, default false)
?? | ?_ | // Conditionals Logic (Under development)

Conditional logic based on environment ( options.env ). ?? = if, ?_ = else, // = end.

← Inline
?? _allow :: !! Ui/Dashboard ?_ !! Ui/Login
 
← Multiline
++
?? _allow
   _ .green
?? _warn
   _ .yellow
?_
   _ .red
//
$$ Web3 Reserved

Reserved for Ethereum and blockchain-related logic. Not yet implemented.

← Back to home Tools → GitHub →