{"id":21525247,"url":"https://github.com/anikhasibul/vectydoc","last_synced_at":"2026-01-03T18:02:51.982Z","repository":{"id":144242013,"uuid":"148066160","full_name":"AnikHasibul/vectydoc","owner":"AnikHasibul","description":"Documentation for github.com/gopherjs/vecty . Also contains various vecty examples! 😎","archived":false,"fork":false,"pushed_at":"2018-09-10T21:36:42.000Z","size":9,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-24T05:25:11.014Z","etag":null,"topics":["documentation","example","gopherjs","vecty"],"latest_commit_sha":null,"homepage":null,"language":null,"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/AnikHasibul.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":"2018-09-09T21:11:40.000Z","updated_at":"2019-04-17T10:58:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4c60d5e-3048-4f74-9d2d-a731cff39b89","html_url":"https://github.com/AnikHasibul/vectydoc","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/AnikHasibul%2Fvectydoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnikHasibul%2Fvectydoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnikHasibul%2Fvectydoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnikHasibul%2Fvectydoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnikHasibul","download_url":"https://codeload.github.com/AnikHasibul/vectydoc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085008,"owners_count":20395523,"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":["documentation","example","gopherjs","vecty"],"created_at":"2024-11-24T01:34:01.838Z","updated_at":"2026-01-03T18:02:46.962Z","avatar_url":"https://github.com/AnikHasibul.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e This wiki isn't completed. Link to the content table items will be added after completing each page!\n\nWelcome to the unofficial vecty doc\n\n[Vecty](https://github.com/gopherjs/vecty) is a [React](https://facebook.github.io/react)-like library for [GopherJS](https://github.com/gopherjs/gopherjs) so that you can do frontend development in Go instead of writing JavaScript/HTML/CSS.\n\n**Before you dive into this, you should know some basic of Golang, Javascript, Html and some frontend knowledge.**\n\n* Getting Started\n    * [Installation](#installation)\n    * [Vecty Hello world](#vecty-hello-world)\n    * [Vecty Components](#vecty-components)\n    * [Vecty Elements](#vecty-elements)\n    * Vecty Properties\n    * Vecty Styling\n    * Vecty Data Attribute\n    * Vecty DOM Event\n    * Vecty Render And Rerender\n* Examples\n    * WORK IN PROGRESS\n\n# Installation\n\n\u003e The [vecty](https://github.com/gopherjs/vecty) project is experimental. You should consider it's [issues](https://github.com/gopherjs/vecty/issues/) before putting it into production!\n\n## Install via `go get`\n\nYou can install `vecty` by the `go get` command\n\n```sh\ngo get -u -v github.com/gopherjs/vecty\n```\n\nThe output should be something like this:\n\n```txt\ngithub.com/gopherjs/vecty (download)\ngithub.com/gopherjs/gopherjs (download)\n```\n\nDone!\n\nNow run `go tool doc vecty` to see the documentation. You may also see the documentation at [godoc.org/github.com/gopherjs/vecty](https://github.com/gopherjs/vecty).\n\n\n# Vecty Hello World\n\nThis tutorial will aim to introduce you to basic Vecty concepts.\n\nYou should create a project directory inside your `$GOPATH`. In this tutorial we will use `$GOPATH/src/vecty-example`\n\nTo begin, we \nwill render a simple web page. Create a file **main.go** and paste the following\ncontents. \n ```go\npackage main\nimport (\n    \"github.com/gopherjs/vecty\"\n    \"github.com/gopherjs/vecty/elem\"\n)\n func main() {\n    // Set the HTML page title\n    vecty.SetTitle(\"Vecty Tutorial\")\n   // Declare a new component\n   c := \u0026MyComponent{}\n   // Render the component\n   vecty.RenderBody(c)\n}\n\n// Our working component\ntype MyComponent struct {\n    // To use it as a vect.Component\n    vecty.Core\n}\n\nfunc (c *MyComponent) Render() *vecty.HTML {\n   // Return a new elem.Body\n   // It will also replace the existing body element of the target webpage\n    return elem.Body(\n        elem.Heading1(\n            vecty.Text(\n                \"Hello, World\",\n            ),\n        ),\n    )\n}\n```\nSince Vecty is built on gopherjs, we can view it right away with the gopherjs \ndevelopment server. Open a terminal and run `gopherjs server`, and navigate to \nthe appropriate URL. The gopherjs server will render and serve this file \ndirectly from your **GOPATH**. For instance, if you saved **main.go** here:\n\n ```sh\n$GOPATH/src/vecty-example/main.go\n```\n\nThe development server should serve this page at `http://localhost:8080/vecty-example`\n\n## Explanation\n\nThis code is very simple. We declare one custom Component, and this component\nembeds the `Body`, `Heading1`, and `Text` elements built in to Vecty.\nUsing Components let's us create high-level, reusable containers for our UI. \n\nAt a minimum, a valid Component must be a `struct` that\n* declares a `Render` function\n* embeds `vecty.Core`\nThe `Render` function is where we define the look and feel of our component. The `vecty.Core` bit uses Go's struct embedding to help our component implement the `vecty.Component` interface.\n\nSo far, we haven't written any HTML. All we have done is write our component and pass it to Vecty's `RenderBody` function. This function is special: you **must** pass it a Component that returns an `elem.Body`. Fortunately, our code satisfies\nthis.\n\n\n# Vecty Components\n\n\u003e Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component documentation [here](https://godoc.org/github.com/gopherjs/vecty).\n\nConceptually, components are like Golang functions. They accept arbitrary inputs (from struct fields) and return `vecty.ComponentOrHTML` describing what should appear on the screen.\n\n## Declaring a component\n\nTo be a component, a struct must have the `vecty.Core` to be a `vecty.Component` interface.\n\n```go\ntype MyComponent struct {\n    vecty.Core\n}\n```\nThis struct also may contain extra fields. As:\n\n```go\ntype MyComponent struct {\n    vecty.Core\n    Text string\n}\n```\n\n## Rendering a component\n\n### The `Render()` Method\nA component must have the `Render()` method. This method returns the HTML (`vecty.ComponentOrHTML`) presentation of a component.\n\n```go\nfunc (v *MyComponent) Render() vecty.ComponentOrHTML {\n   return elem.Heading1(\n        // Remembered?\n        // The MyComponent.Text?\n        vecty.Text(v.Text),\n    )\n}\n```\n\nDone! Your component is ready\n\n### The `vecty.RenderBody()`\n\nTill now we have a `MyComponent` struct with `Render()` method. And it's a `vecty.Component`.\n\nSo now the question is **how to render a component?**\n\n```go\nfunc main(){\n    c := \u0026MyComponent {\n        Text: \"Hello World!\",\n    }\n    vecty.RenderBody(c)\n}\n```\n\nVoila!\nWe have rendered a component!\n\nNiw if you are following the same building and serving steps as we've shown at our [Hello World](hello-world) example, you should see the rendered page at `http://localhost:8080/vecty-example/`\n\n## Documentation\nFrom the [godoc.org](https://godoc.org/github.com/gopherjs/vecty#Component):\n```txt\ntype Component interface {\n        // Render is responsible for building HTML which represents the component.\n        //\n        // If Render returns nil, the component will render as nothing (in reality,\n        // a noscript tag, which has no display or action, and is compatible with\n        // Vecty's diffing algorithm).\n        Render() ComponentOrHTML\n\n        // Context returns the components context, which is used internally by\n        // Vecty in order to store the previous component render for diffing.\n        Context() *Core\n\n        // Has unexported methods.\n}\n    Component represents a single visual component within an application. To\n    define a new component simply implement the Render method and embed the Core\n    struct:\n\n    type MyComponent struct {\n        vecty.Core\n        ... additional component fields (state or properties) ...\n    }\n\n    func (c *MyComponent) Render() vecty.ComponentOrHTML {\n        ... rendering ...\n    }\n```\n\n# Vecty Elements\n\n\u003e Package elem defines markup to create DOM elements.\nGenerated from \"HTML element reference\" by Mozilla Contributors,\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element, licensed under CC-BY-SA 2.5.\n\nVecty elements are `vecty structure`d html elements. The package `github.com/gopherjs/vecty/elem` provides elements for vecty components.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanikhasibul%2Fvectydoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanikhasibul%2Fvectydoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanikhasibul%2Fvectydoc/lists"}