{"id":26708565,"url":"https://github.com/dsolimando/moko","last_synced_at":"2026-04-28T20:33:49.159Z","repository":{"id":37735947,"uuid":"101056803","full_name":"dsolimando/moko","owner":"dsolimando","description":"A lightweight WebComponents based mobile JS lib","archived":false,"fork":false,"pushed_at":"2023-01-07T06:01:11.000Z","size":10043,"stargazers_count":1,"open_issues_count":15,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T07:39:11.536Z","etag":null,"topics":["custom-elements","javascript","library","mobile","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsolimando.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-08-22T11:44:22.000Z","updated_at":"2019-11-02T22:07:54.000Z","dependencies_parsed_at":"2023-02-06T13:30:36.007Z","dependency_job_id":null,"html_url":"https://github.com/dsolimando/moko","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsolimando%2Fmoko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsolimando%2Fmoko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsolimando%2Fmoko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsolimando%2Fmoko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsolimando","download_url":"https://codeload.github.com/dsolimando/moko/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245798244,"owners_count":20673906,"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":["custom-elements","javascript","library","mobile","webcomponents"],"created_at":"2025-03-27T07:19:14.394Z","updated_at":"2026-04-28T20:33:44.138Z","avatar_url":"https://github.com/dsolimando.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moko\n\nMoko is a lightweight WebComponents based navigation library\nhighly inspired by [React Navigation](https://reactnavigation.org).\n\nIt supports three kinds of navigators:\n\n- switch navigator\n- stack navigator\n- tab navigator\n\n## Switch navigator\n\nSwitch navigator only show one content at a time, each route displaying a different content. Content is not cached\n\n![](./doc/switch-navigator.gif)\n\nCode example:\n\n```html\n\u003cmoko-switch-navigator\u003e\n  \u003cmoko-route path=\"view1/:name\" component=\"demo-view1\"\u003e\n    \u003cspan\u003ediego\u003c/span\u003e\n  \u003c/moko-route\u003e\n  \u003cmoko-route path=\"view2/:name\" component=\"demo-view2\"\u003e\u003c/moko-route\u003e\n  \u003cmoko-route path=\"view3/:name\" component=\"demo-view3\"\u003e\u003c/moko-route\u003e\n\u003c/moko-switch-navigator\u003e\n```\n\nA navigator contains one or multiple `\u003cmoko-route\u003e`. A route has two mandatory attributes `path` and `component`.\n\n- `path` associates the route to an url fragment. Each time an url match that path, the component associated with that route will be displayed. The path can contain placeholders\n- `component` name of the Web Component to be displayed for a matching route.\n\nNavigation is triggered either with standard `\u003ca href=\"#some-route\"\u003eClick\u003c/a\u003e` or with safer moko provided custom element\n`\u003cmoko-link to=\"some-route\"\"\u003e\u003c/moko-link\u003e`. `moko-link` supports navigator nesting and only relative (to the closest parent navigator) path must be provided.\n\nIf the url fragment is empty, the component associated with the first route will be rendered.\n\nIt's possible to define a default route to render with the `default-path` attribute.\n\nBy default a navigator will take all the space available in his node ancestor.\n\n### Server side rendering\n\nFirst `moko-route` element can contain markup that will be displayed before corresponding web component is rendered properly.\nIt allows to server side render content and make the page SSO friendly.\n\n### Demo\n\nSee [switchNavigator.html](./demo/switchNavigator.html) for a complete example.\n\n## Stack navigator\n\nStack navigator will display new content on top of previous one while navigating.\n\n![](./doc/stack-navigator.gif)\n\nCode example:\n\n```html\n\u003cmoko-stack-navigator\u003e\n  \u003cmoko-route path=\"path1\" component=\"demo-el1\"\u003e\u003c/moko-route\u003e\n  \u003cmoko-route path=\"path2\" component=\"demo-el2\"\u003e\u003c/moko-route\u003e\n  \u003cmoko-route path=\"path3\" component=\"demo-el3\"\u003e\u003c/moko-route\u003e\n\u003c/moko-stack-navigator\u003e\n```\n\n### Demo\n\nSee [stackNavigator.html](./demo/stack-navigator.html) for a complete example.\n\n### Server side rendering\n\nFirst `moko-route` element can contain markup that will be displayed before corresponding web component is rendered properly.\nIt allows to server side render content and make the page SSO friendly.\n\n## Tab navigator\n\nTab navigator will display a tabbar at the bottom of the screen. Each click on a tab entry will\ndisplay different content.\n\n![](./doc/tabbar-navigator.gif)\n\nCode example:\n\n```html\n\u003cmoko-tab-navigator active-color=\"red\"\u003e\n  \u003cmoko-tab-route\n    icon=\"trending-up\"\n    title=\"Home\"\n    path=\"home1\"\n    component=\"demo-home\"\n  \u003e\n  \u003c/moko-tab-route\u003e\n  \u003cmoko-tab-route\n    icon=\"package\"\n    title=\"Home2\"\n    path=\"home2\"\n    component=\"demo-home2\"\n  \u003e\n  \u003c/moko-tab-route\u003e\n  \u003cmoko-tab-route\n    icon=\"trending-down\"\n    title=\"Home3\"\n    path=\"home3\"\n    component=\"demo-home3\"\n  \u003e\n  \u003c/moko-tab-route\u003e\n  \u003cdiv style=\"height: 200%; background: yellow\"\u003eHome1\u003c/div\u003e\n\u003c/moko-tab-navigator\u003e\n```\n\n### Demo\n\nSee [tabNavigator.html](./demo/tab-navigator.html) for a complete example.\n\n### Server side rendering\n\n`moko-tab-navigator` element can contain markup as last child that will be displayed before corresponding web component is rendered properly.\nIt allows to server side render content and make the page SSO friendly.\n\n### Using navigators in your webpage\n\nEach navigator is available as Web Components through ES6 modules (see the [dist](https://github.com/dsolimando/moko/tree/master/dist) folder).\n\n## Live Demos\n\n* [Switch Navigator](http://plnkr.co/edit/3EWAOLDUtFfWOaupwtdZ?p=preview)\n* [Stack Navigator](http://plnkr.co/edit/7CJPynCaB8wyWmMa3EKw?p=preview)\n* [Tab  Navigator](http://plnkr.co/edit/vC5DSIE2aKzkRlayJTmF?p=preview)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsolimando%2Fmoko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsolimando%2Fmoko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsolimando%2Fmoko/lists"}