{"id":17036798,"url":"https://github.com/mmghv/mockupsandbox","last_synced_at":"2026-04-30T18:32:44.233Z","repository":{"id":188058663,"uuid":"678043070","full_name":"mmghv/MockupSandbox","owner":"mmghv","description":"A simple sandbox for learning JavaScript with basic mockup UI controls","archived":false,"fork":false,"pushed_at":"2023-09-26T04:04:05.000Z","size":3348,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T22:45:38.379Z","etag":null,"topics":["javascript","sandbox"],"latest_commit_sha":null,"homepage":"https://mmghv.github.io/MockupSandbox/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmghv.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-13T13:54:26.000Z","updated_at":"2023-09-24T21:40:02.000Z","dependencies_parsed_at":"2023-08-13T15:08:37.199Z","dependency_job_id":"70d4d9f4-2b7b-49b6-81ba-4400c551b22a","html_url":"https://github.com/mmghv/MockupSandbox","commit_stats":null,"previous_names":["mmghv/simple-sandbox","mmghv/mockupsandbox"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mmghv/MockupSandbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmghv%2FMockupSandbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmghv%2FMockupSandbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmghv%2FMockupSandbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmghv%2FMockupSandbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmghv","download_url":"https://codeload.github.com/mmghv/MockupSandbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmghv%2FMockupSandbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32473804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","sandbox"],"created_at":"2024-10-14T08:52:01.144Z","updated_at":"2026-04-30T18:32:44.217Z","avatar_url":"https://github.com/mmghv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MockupSandbox\r\n\r\nA simple sandbox for learning JavaScript with basic mockup UI controls\r\n\r\nhttps://mmghv.github.io/MockupSandbox\r\n\r\n![screenshot](screenshot.png)\r\n\r\n---\r\n\r\nThe main goal of this tool is to provide the learner with a simple coding sandbox equipped with a small set of basic UI controls for a quick user interface mockup, It enables the learner to focus on fundamental language concepts while connecting these concepts to user interfaces that make sense and not only logging to the console.\r\n\r\n## Who is this for\r\n\r\nThis is intended for absolute beginners who wish to start learning programming with JavaScript directly without needing to go through HTML and CSS first. even if they know HTML, it's essential to learn programming fundamentals before learning DOM manipulation.\r\n\r\n## Supported UI controls\r\n\r\n### Basic controls\r\n\r\nAvailable basic controls are (title, input, output \u0026 button) :\r\n\r\n```js\r\n// Add title bar\r\ntitle(\"Page Title\")\r\n\r\n// Add empty input field\r\nlet input1 = input()\r\n\r\n// Add input field with title and initial value\r\nlet input2 = input(\"Input title\", \"Input value\")\r\n\r\n// Add input of type number (value returns a number and not a string)\r\nlet input3 = input(\"Number input\").number()\r\n\r\n// Add output field\r\nlet output1 = output(\"Output title\")\r\n\r\n// Get input value\r\nconsole.log(input2.value)\r\n\r\n// Set output (or input) value\r\noutput1.value = \"Output value\"\r\n\r\n// Add button\r\nbutton(\"Click me!\", click)\r\n\r\n// Button click callback function\r\nfunction click() {\r\n    input1.value = \"Button clicked!\"\r\n    input3.value = input3.value + 1\r\n    console.log(\"Button clicked!\")\r\n}\r\n```\r\n\r\n### Advanced controls\r\n\r\nA more advanced table control is available which is ideal for learning loops and working with dynamic lists (Arrays and Objects could also be used).\r\n\r\nA full example of working with the table can be found [here](https://mmghv.github.io/MockupSandbox?example=table).\r\n\r\n### Other methods \u0026 tools\r\n\r\n`rtl()` and `ltr()` functions can be used to change the page direction to right-to-left and left-to-right respectively.\r\n\r\n## Saving and sharing your code\r\n\r\nCurrently, there's no backend or a login system, but a simple system for saving and sharing your code is implemented in the frontend using the URL, when you edit the code the URL will change automatically, the whole code will be compressed and encoded into the URL so you can bookmark it or send the link to someone else.\r\n\r\n## TODO\r\n\r\n- [x] Add other UI controls (like tables \u0026 lists that can be used with arrays and loops).\r\n- [x] Allow saving \u0026 sharing code via links.\r\n- [ ] short links.\r\n- [x] Make the layout mobile-friendly.\r\n- [ ] Add the ability to control the layout.\r\n- [ ] Build a desktop version for offline use\r\n- [ ] Add Dark/Light mode switch.\r\n\r\nPlease feel free to suggest or contribute enhancements that may benefit the beginners.\r\n\r\n## License\r\n\r\nCopyright © 2023 [Mohamed Gharib](https://github.com/mmghv), Released under the [MIT license](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmghv%2Fmockupsandbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmghv%2Fmockupsandbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmghv%2Fmockupsandbox/lists"}