Rip REPL - Interactive Browser Environment

Rip REPL - Interactive Browser Environment
Type .help for commands, try Rip expressions!

rip>

Rip Source

# ============================================
# Rip Components & Templates Demo
# ============================================

# A counter component with Pug-style template syntax
# A counter component with Pug-style template syntax
component Counter
  @name = "Hello"      # prop with default
  @initial = 0       # prop with default
  count := @initial
  dozen ~= count * 12
  inc: -> count += 1
  dec: -> count -= 1
  render
    .counter
      i "#{@name}, did you know that"
      button @click: @dec, "−"
      span.value count
      button @click: @inc, "+"
      i "dozen is #{dozen} items?"

Counter.new(name: "Señor", initial: 5).mount "#counter-mount"

# ============================================
# Component with Two-Way Binding
# ============================================

component Greeter
  name = "World"
  render
    .greeter
      input value <=> name
      .greeting
        span "Hello, "
        span.name name
        span "!"

Greeter.new().mount "#greeter-mount"

# ============================================
# Derived Values (~= always equal)
# ============================================

component Calculator
  num := 5
  doubled ~= num * 2
  squared ~= num * num
  render
    .calculator
      .row
        label "Number: "
        input type: "number", value <=> num
      .row
        span "Doubled: "
        span.result doubled
      .row
        span "Squared: "
        span.result squared

Calculator.new().mount "#calc-mount"

Live Output

Counter Component

Greeter with Two-Way Binding

Calculator with Derived Values

Rip Source

Generated JavaScript

Rip Browser REPL

Counter Component

Greeter with Two-Way Binding

Calculator with Derived Values