A comprehensive view package for Echo.

Echo ViewKit provides a comprehensive server side template rendering for Echo.

Server side rendering

Templating engine.

Echo ViewKit has a built-in templating engine that is forked from Pongo2. It provides a Django-like syntax. It is easy to use in your Echo application.

Learn more

index.html

{# if statement #}
{% if errorMessage %}
  <div>{{ errorMessage }}</div>
{% endif %}

{# for loop #}
{% for user in users %}
  <div>{{ user.Name }}</div>
{% endfor %}

server.go

// Go code that calls the above template.

type IndexProps struct {
	ErrorMessage string  `pongo2:"errorMessage"`
	Users        []*User `pongo2:"users"`
	// ...
}

func IndexHandler(c echo.Context) error {
	users := ...
	return c.Render(http.StatusOK, "index", &IndexProps{
		ErrorMessage: "Something went wrong.",
		Users users,
	})
}

Encapsulate and reuse parts of your views

Component-based.

You can use component-based architecture like Laravel Blade. It enhances code organization and maintainability. You can implement your components with Go code and Pongo2 templates.

Learn more

index.html

{# render an alert message... #}
<x-alert type="success" :message="message"/>

{# slots are supported... #}
<x-alert>
  <x-slot name="title">Custom title</x-slot>
  <x-slot name="message">This is a success message.</x-slot>
</x-alert>

{# scoped slots are also supported... #}
<x-counter slot-data="{count}" >
  <div>{{ count }}</div>
</x-counter>

Integrated with front-end tools

Vite integration.

You can use Vite to build your front-end assets and integrate them with Echo ViewKit.

Learn more

Are you looking for real code examples?

Absolutely! This website is built with Echo ViewKit. You can see the entire source code.

View the source code