{"id":20291780,"url":"https://github.com/samuelnovaes/renderplus","last_synced_at":"2026-05-09T13:48:48.474Z","repository":{"id":57353551,"uuid":"79280098","full_name":"samuelnovaes/renderplus","owner":"samuelnovaes","description":"Render advanced HTML pages with JavaScript","archived":false,"fork":false,"pushed_at":"2018-11-22T07:24:59.000Z","size":40,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-16T08:30:58.485Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samuelnovaes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-17T22:44:12.000Z","updated_at":"2018-11-22T07:25:02.000Z","dependencies_parsed_at":"2022-09-16T08:01:34.209Z","dependency_job_id":null,"html_url":"https://github.com/samuelnovaes/renderplus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnovaes%2Frenderplus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnovaes%2Frenderplus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnovaes%2Frenderplus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelnovaes%2Frenderplus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelnovaes","download_url":"https://codeload.github.com/samuelnovaes/renderplus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241696155,"owners_count":20004741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T15:13:53.077Z","updated_at":"2026-05-09T13:48:43.429Z","avatar_url":"https://github.com/samuelnovaes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# renderplus\n\nAdvanced renderer for Express\n\n[![NPM](https://nodei.co/npm/renderplus.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/renderplus/)\n\n# Install\n\n```bash\nnpm install renderplus\n```\n\n# Full example\n\n```javascript\nconst express = require('express')\nconst renderplus = require('renderplus')\nconst app = express()\napp.use(renderplus)\n\nlet button1 = false\n\nlet options = [\n\t{ text: 'Zero', value: 0 },\n\t{ text: 'One', value: 1 },\n\t{ text: 'Two', value: 2 },\n\t{ text: 'Three', value: 3 },\n\t{ text: 'Four', value: 4 }\n]\n\napp.get('/', (req, res) =\u003e {\n\tres.render(\n\t\t['html', [\n\t\t\t['head', [\n\t\t\t\t['title', 'Test'],\n\t\t\t\t['meta', { charset: 'utf-8' }]\n\t\t\t]],\n\t\t\t['body', [\n\t\t\t\t//Text\n\t\t\t\t'SELECT A NUMBER:',\n\t\t\t\t['br'],\n\t\t\t\t['select', { id: 'choice', onchange: 'test()' }, [\n\t\t\t\t\t//List rendering\n\t\t\t\t\t['for', options, i =\u003e (\n\t\t\t\t\t\t['option', { value: i.value }, i.text]\n\t\t\t\t\t)]\n\t\t\t\t]],\n\t\t\t\t//Conditional rendering\n\t\t\t\t['if', button1, {\n\t\t\t\t\tthen: ['button', 'Button 1'],\n\t\t\t\t\telse: ['button', 'Button 2']\n\t\t\t\t}]\n\t\t\t]]\n\t\t]]\n\t)\n})\n\napp.listen(8080)\n```\n\n**It renders**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003ctitle\u003eTest\u003c/title\u003e\n\t\t\u003cmeta charset=\"utf-8\"\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\tSELECT A NUMBER:\n\t\t\u003cbr\u003e\n\t\t\u003cselect id=\"choice\" onchange=\"test()\"\u003e\n\t\t\t\u003coption value=\"0\"\u003ezero\u003c/option\u003e\n\t\t\t\u003coption value=\"1\"\u003eone\u003c/option\u003e\n\t\t\t\u003coption value=\"2\"\u003etwo\u003c/option\u003e\n\t\t\t\u003coption value=\"3\"\u003ethree\u003c/option\u003e\n\t\t\t\u003coption value=\"4\"\u003efour\u003c/option\u003e\n\t\t\u003c/select\u003e\n\t\t\u003cbutton\u003eButton 1\u003c/button\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Render method syntax\n\n```javascript\nres.render(htmlTag)\n```\n\n- `htmlTag`: array\n\n# Tag syntax\n\n```javascript\n[tagName, attributes, content]\n```\n\n- `tagName`: string\n- `attributes`: object\n- `content`: array (children) or string (text)\n\n\u003e `attributes` and `content` are optional\n\n### Example\n```javascript\n['br']\n```\n```javascript\n['h1', 'Hello World']\n```\n```javascript\n['meta', {charset: 'utf-8'}]\n```\n```javascript\n['div', {id: 'test'}, 'Hello World']\n```\n```javascript\n['div', {id: 'test'}, [\n\t//children here\n]]\n```\n```javascript\n['body', [\n\t//children here\n]]\n```\n\n# Text\n\n### Example\n```javascript\n['body', [\n\t'It is a text inside BODY',\n\t['br'],\n\t['h1', 'It is a text inside H1'],\n\t'Here is another text inside BODY'\n]]\n```\n\n# Conditional rendering\n\n```javascript\n['if', condition, {\n\tthen: thenContent,\n\telse: elseContent\n}]\n```\n\n- `condition`: boolean\n- `thenContent`: array (tag)\n- `elseContent`: array (tag)\n\n\u003e `elseContent` is optional\n\n# List rendering\n\n```javascript\n['for', list, callback]\n```\n- `list`: array\n- `callback`: function\n\n### Callback syntax\n```javascript\n(item, index) =\u003e content\n```\n\n- `content`: array (tag)\n\n# Creating layouts and components Example\n\n```javascript\nconst express = require('express')\nconst renderplus = require(\"renderplus\")\nconst app = express()\napp.use(renderplus)\n\nlet layout(children) =\u003e (\n\t['html', [\n\t\t['head', [\n\t\t\t['title', 'Test'],\n\t\t\t['meta', {charset: 'utf-8'}]\n\t\t]],\n\t\t['body', children]\n\t]]\n)\n\nlet customButton(label) =\u003e (\n\t['button', {class: 'my-custom-button'}, label]\n)\n\napp.get('/', (req, res) =\u003e {\n\tres.render(\n\t\tlayout([\n\t\t\t['div', [\n\t\t\t\tcustomButton('Button 1'),\n\t\t\t\tcustomButton('Button 2'),\n\t\t\t\t['hr']\n\t\t\t]]\n\t\t])\n\t)\n})\n\napp.listen(8080)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelnovaes%2Frenderplus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelnovaes%2Frenderplus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelnovaes%2Frenderplus/lists"}