Remake Recipes 🌈

Explore what Remake can do with these simple recipes

With Remake, HTML gets super powers

  1. HTML gets the power to store data
  2. Remake lets your users edit their data
  3. You get the power to build a full web apps for real users 10x faster
<div object key:page-title="I am a page title"></div>
→
{
"pageTitle": "I am a page title"
}
I am a page title
<div object key:page-title="@innerText">I am a page title</div>
→
{
"pageTitle": "I am a page title"
}
I am an editable page title
<div object key:page-title="@innerText" edit:page-title>I am an editable page title</div>
→
{
"pageTitle": "I am an editable page title"
}
I am an editable page title with a default value
<div object key:page-title="@innerText" edit:page-title default:page-title="Default page title">I am an editable page title with a default value</div>
→
{
"pageTitle": "I am an editable page title with a default value"
}
Some text on multiple lines
<div object key:some-multi-line-text="@innerText" edit:some-multi-line-text:textarea>Some text
on multiple
lines</div>
→
{
"someMultiLineText": "Some text\non multiple\nlines"
}
Sortable item 1
Sortable item 2
Sortable item 3
<div array key="someSortableItems" sortable>
  <div object key:sortable-item-text="@innerText" edit:sortable-item-text>Sortable item 1</div>
  <div object key:sortable-item-text="@innerText" edit:sortable-item-text>Sortable item 2</div>
  <div object key:sortable-item-text="@innerText" edit:sortable-item-text>Sortable item 3</div>
</div>
→
{
"someSortableItems": [
{
"sortableItemText": "Sortable item 1"
},
{
"sortableItemText": "Sortable item 2"
},
{
"sortableItemText": "Sortable item 3"
}
]
}
Page title
<div object key:page-title="@search">
  <div target:page-title="@innerText">Page title</div>
  <button edit:page-title>Edit page title</button>
</div>
→
{
"pageTitle": "Page title"
}
Notion 
<div object key:my-favorite-link-name="@search" key:my-favorite-link-url="@search">
  <div>
    <a target:my-favorite-link-url="@href" href="https://www.notion.so/" target="_blank">
      <span target:my-favorite-link-name="@innerText">Notion</span>
    </a>
  </div>
  <button edit:my-favorite-link-name edit:my-favorite-link-url>Edit link</button>
</div>
→
{
"myFavoriteLinkName": "Notion",
"myFavoriteLinkUrl": "https://www.notion.so/"
}
Jack o' lanterns for Halloween 
<div object key:my-favorite-image-url="@search">
  <div>
    <img target:my-favorite-image-url="@src" src="https://remake-web-assets.s3.amazonaws.com/jack-o-lanterns.png" alt="Jack o' lanterns for Halloween">
  </div>
  <button edit:my-favorite-image-url>Edit image URL</button>
</div>
→
{
"myFavoriteImageUrl": "https://remake-web-assets.s3.amazonaws.com/jack-o-lanterns.png"
}
My Amazing Adventure!
<div object key:page-title="@innerText" edit:page-title:without-remove>My Amazing Adventure!</div>
→
{
"pageTitle": "My Amazing Adventure!"
}
Site name
<div object key:site-name="@search">
  <div target:site-name="@innerText">Site name</div>
  <input type="text" update:site-name value="Site name">
</div>
→
{
"siteName": "Site name"
}
This is a text note
<div object key:text-note="@search">
  <div target:text-note="@innerText">This is a
text note</div>
  <textarea update:text-note>This is a
text note</textarea>
</div>
→
{
"textNote": "This is a\ntext note"
}
Portfolio theme: Classic
<div object key:portfolio-theme="Classic">
  <div>Portfolio theme: <b watch:portfolio-theme="@innerText">Classic</b></div>
  <div><label><input type="radio" value="Classic" update:portfolio-theme name="portfolio-theme" checked> Classic</label></div>
  <div><label><input type="radio" value="Modern" update:portfolio-theme name="portfolio-theme"> Modern</label></div>
  <div><label><input type="radio" value="Artistic" update:portfolio-theme name="portfolio-theme"> Artistic</label></div>
</div>
→
{
"portfolioTheme": "Classic"
}
Settings:
OnOff
OnOff
<div object key:dark-mode="on" key:available-for-projects="off">
  <div><b>Settings:</b></div>
  <div><label><input type="checkbox" update:dark-mode checked> Dark mode</label> <b data-dark-mode-on>On</b><b data-dark-mode-off>Off</b></div>
  <div><label><input type="checkbox" update:available-for-projects> Available for projects</label> <b data-available-on>On</b><b data-available-off>Off</b></div>
</div>
→
{
"darkMode": "on",
"availableForProjects": "off"
}
Page layout: One column
<div object key:page-layout="One column">
  <div>Page layout: <b watch:page-layout="@innerText">One column</b></div>
  <select update:page-layout>
    <option value="One column">One column</option>
    <option value="Two column">Two column</option>
    <option value="Three column">Three column</option>
  </select>
</div>
→
{
"pageLayout": "One column"
}
Favorite color: none chosen
<div object key:favorite-color="@search">
  <div>Favorite color: <b target:favorite-color="@innerText">none chosen</b></div>
  <button update:favorite-color="red">red</button>
  <button update:favorite-color="green">green</button>
  <button update:favorite-color="rainbow">rainbow</button>
</div>
→
{
"favoriteColor": "none chosen"
}
Direct messages: on
<div object key:direct-messages="@search">
  <div>Direct messages: <b target:direct-messages="@innerText">on</b></div>
  <button toggle:direct-messages>Toggle</button>
</div>
→
{
"directMessages": "on"
}
Page title
Mirror data: Page title
Mirror data: Page title
Mirror data: Page title
<div object key:page-title-being-watched="@search">
  <div target:page-title-being-watched="@innerText">Page title</div>
  <div>Mirror data: <span watch:page-title-being-watched="@innerText">Page title</span></div>
  <div>Mirror data: <span watch:page-title-being-watched="@innerText">Page title</span></div>
  <div>Mirror data: <span watch:page-title-being-watched="@innerText">Page title</span></div>
  <button edit:page-title-being-watched>Edit page title</button>
</div>
→
{
"pageTitleBeingWatched": "Page title"
}
10
x 3 = 30
x 6 = 60
x 9 = 90
<div object key:number-for-calculation="@search">
  <button edit:number-for-calculation>Edit number</button>
  <div><b target:number-for-calculation="@innerText">10</b></div>
  <div>x 3 = <span watch:number-for-calculation="customWatchFunc(3)">30</span></div>
  <div>x 6 = <span watch:number-for-calculation="customWatchFunc(6)">60</span></div>
  <div>x 9 = <span watch:number-for-calculation="customWatchFunc(9)">90</span></div>
</div>
→
{
"numberForCalculation": "10"
} 
<div>
  <button save>Save page</button>
</div>
→
undefined

Books:

Ready Player One
Ernest Cline
Books by same author:
Ready Player Two
Read by: Wil Wheaton
4.8/5
Armada
Read by: Wil Wheaton
n/a
Dune
Frank Herbert
Books by same author:
The Jesus Incident
Read by: Scott Brick
4.4/5
<div object>
  <h1 class="books-heading">Books:</h1>
  <div array key="books">
    <div object key:book-name="@search">
      <div target:book-name="@innerText">Ready Player One</div>
      <div object key="authorInfo" key:author-name="@search">
        <div target:author-name="@innerText">Ernest Cline</div>
        <div class="other-books">
          <div>Books by same author:</div>
          <div array key="otherBooks">
            <div object key:book-name="@search">
              <div target:book-name="@innerText">Ready Player Two</div>
              <div array key="audiobookReaders">
                <div object key:reader-name="@search" key:reader-rating="@search">
                  <div>Read by: <span target:reader-name="@innerText">Wil Wheaton</span></div>
                  <div target:reader-rating="@innerText">4.8/5</div>
                </div>
              </div>
            </div>
            <div object key:book-name="@search">
              <div target:book-name="@innerText">Armada</div>
              <div array key="audiobookReaders">
                <div object key:reader-name="@search" key:reader-rating="@search">
                  <div>Read by: <span target:reader-name="@innerText">Wil Wheaton</span></div>
                  <div target:reader-rating="@innerText">n/a</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div object key:book-name="@search">
      <div target:book-name="@innerText">Dune</div>
      <div object key="authorInfo" key:author-name="@search">
        <div target:author-name="@innerText">Frank Herbert</div>
        <div class="other-books">
          <div>Books by same author:</div>
          <div array key="otherBooks">
            <div object key:book-name="@search">
              <div target:book-name="@innerText">The Jesus Incident</div>
              <div array key="audiobookReaders">
                <div object key:reader-name="@search" key:reader-rating="@search">
                  <div>Read by: <span target:reader-name="@innerText">Scott Brick</span></div>
                  <div target:reader-rating="@innerText">4.4/5</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
→
{
"books": [
{
"bookName": "Ready Player One",
"authorInfo": {
"authorName": "Ernest Cline",
"otherBooks": [
{
"bookName": "Ready Player Two",
"audiobookReaders": [
{
"readerName": "Wil Wheaton",
"readerRating": "4.8/5"
}
]
},
{
"bookName": "Armada",
"audiobookReaders": [
{
"readerName": "Wil Wheaton",
"readerRating": "n/a"
}
]
}
]
}
},
{
"bookName": "Dune",
"authorInfo": {
"authorName": "Frank Herbert",
"otherBooks": [
{
"bookName": "The Jesus Incident",
"audiobookReaders": [
{
"readerName": "Scott Brick",
"readerRating": "4.4/5"
}
]
}
]
}
}
]
}
Todo 1
Todo 2
Todo 3
<div object>
  <div array key="todos">
    {{#for todo in todos}}
      <div object key:text="@innerText" edit:text>{{todo.text}}</div>
    {{/for}}
  </div>
  <button new:todo>Add todo</button>
</div>
→
{
"todos": [
{
"text": "Todo 1"
},
{
"text": "Todo 2"
},
{
"text": "Todo 3"
}
]
}

My freelance project

$4,500
1 hour
planning
2 hours
research
3 hour
working
2.5 hour
revisions
<div object>
  <button new:project>New project</button>
  <div array key="projects">
    {{#for project in projects}}
      <div object key:project-name="@search">
        <h1 target:project-name="@innerText" edit:project-name>{{project.projectName}}</h1>
        <div object key:budget="@innerText" edit:budget>$4,500</div>
        <div array key="projectItems">
          {{#for projectItem in project.projectItems}}
            <div object key:item-length="@search" key:item-type="@search" edit:item-length edit:item-type>
              <div target:item-length="@innerText">{{projectItem.itemLength}}</div>
              <div target:item-type="@innerText">{{projectItem.itemType}}</div>
            </div>
          {{/for}}
        </div>
        <button new:project-item>New item</button>
      </div>
    {{/for}}
  </div>
</div>
→
{
"projects": [
{
"projectName": "My freelance project",
"budget": "$4,500",
"projectItems": [
{
"itemLength": "1 hour",
"itemType": "planning"
},
{
"itemLength": "2 hours",
"itemType": "research"
},
{
"itemLength": "3 hour",
"itemType": "working"
},
{
"itemLength": "2.5 hour",
"itemType": "revisions"
}
]
}
]
} 
<div object key:uploaded-image="@search">
  <input update:uploaded-image type="file" accept="image/*">
  <div>
    <img target:uploaded-image="@src">
  </div>
</div>
→
{
"uploadedImage": ""
}
I am an editable page title
<div custom-save="customSaveFunc">
  <div object key:page-title="@innerText" edit:page-title>I am an editable page title</div>
</div>
→
{
"pageTitle": "I am an editable page title"
} 
<div>
  <div object key:page-title="I am a page title">
    <button remove>Remove</button>
  </div>
</div>
→
{
"pageTitle": "I am a page title"
} 
<div object key:page-title="I am a page title">
  <button erase>Erase data</button>
</div>
→
{
"pageTitle": "I am a page title"
} 
<div object key:page-title="@innerText">
  <button edit:page-title:with-erase>Click me and then the "remove" button to test</button>
</div>
→
{
"pageTitle": "Click me and then the \"remove\" button to test"
}
Edit me!
<div no-save>
  <div object key:item-title="@innerText" edit:item-title>Edit me!</div>
</div>
→
{
"itemTitle": "Edit me!"
}
The best product
$20
<div object key:product-name="@search">
  <div target:product-name="@innerText">The best product</div>
  <div ignore-data object key="productDetails" key:product-price="@innerText">$20</div>
</div>
→
{
"productName": "The best product"
} 
<div disable-events>
  <div object key:favorite-planet="Pluto" key:a-simple-note="A note" key:cool-mode="on">
    <input type="text" update:a-simple-note value="A note">
    <button update:favorite-planet="Mars">Mars</button>
    <button toggle:cool-mode>Toggle cool mode</button>
    <button erase>Erase data</button>
  </div>
</div>
→
{
"favoritePlanet": "Pluto",
"aSimpleNote": "A note",
"coolMode": "on"
}
Color picker choice: Forest green
<div object temporary:key:color-picker-choice="Forest green">
  <div>Color picker choice: <b watch:color-picker-choice="@innerText">Forest green</b></div>
  <div><label><input type="radio" value="Forest green" update:color-picker-choice name="color-picker-choice" checked> Forest green</label></div>
  <div><label><input type="radio" value="Sapphire" update:color-picker-choice name="color-picker-choice"> Sapphire</label></div>
  <div><label><input type="radio" value="Amber" update:color-picker-choice name="color-picker-choice"> Amber</label></div>
</div>
→
{}
Selected menu: Site preview
<div object temporary:key:menu-selection="Site preview">
  <div>Selected menu: <b watch:menu-selection="@innerText">Site preview</b></div>
  <div><button update:menu-selection="Site preview" checked> Site preview</button></div>
  <div><button update:menu-selection="Code editor"> Code editor</button></div>
  <div><button update:menu-selection="User settings"> User settings</button></div>
</div>
→
{}
Generated headline: Don't miss out, try Fooz today!
<div object temporary:key:headline-keyword="@search">
  <div>Generated headline: <b>Don't miss out, try <span target:headline-keyword="@innerText">Fooz</span> today!</b></div>
  <button edit:headline-keyword>Edit keyword</button>
</div>
→
{}
Page heading
Mirror data: Page title
This shouldn't update unless clicked directly
<div object key:some-page-heading="@search">
  <div target:some-page-heading="@innerText">Page heading</div>
  <div>Mirror data: <span watch:some-page-heading="@innerText">Page title</span></div>
  <button edit:some-page-heading>Edit page title</button>
  <div object key="nestedData" key:some-page-heading="This shouldn't update unless clicked directly">
    <div edit:some-page-heading watch:some-page-heading="@innerText">This shouldn't update unless clicked directly</div>
  </div>
</div>
→
{
"somePageHeading": "Page heading",
"nestedData": {
"somePageHeading": "This shouldn't update unless clicked directly"
}
}
remove remove cancel
Uploading