# Creating an Interactive Dev Portal with GraphQL

In this tutorial, you’ll learn how to get to the next level of API documentation using Kong Dev Portal with GraphQL. [Learn more about Kong Konnect and start a free trial](https://konghq.com/kong-konnect/?utm_source=youtube&utm_medium=social&utm_campaign=community)Learn more about Kong Konnect and start a free trial.

[1:00](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=60s)1:00 – What You'll Need

[3:30](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=210s)3:30 – Create a Template

[5:26](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=326s)5:26 – Add Content

[6:27](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=387s)6:27 – Edit Title

[7:55](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=475s)7:55 – Add an API URL

[9:04](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=544s)9:04 – Copy Example Code from GraphiQL

[11:34](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=694s)11:34 – Test the Interactive Dev Portal

[14:08](https://www.youtube.com/watch?v=ZOFDp2hvTvo&t=848s)14:08 – Add a Link to the Navigation

In my example, I'll be using Kong Konnect Enterprise Version 2.4, but the version number does not really matter. I also configured my workspace with one service that points to a Star Wars API endpoint with a GraphQL interface (swapi-graphql.netlify.com).

We'll also be using an open source tool called GraphiQL for interactive documentation of a GraphQL endpoint. With GraphiQL, we'll see requests, responses and automated generation of documentation based on the endpoint.

[Read the full tutorial blog post](https://konghq.com/blog/kong-developer-portal-graphql/?utm_source=youtube&utm_medium=social&utm_campaign=community)Read the full tutorial blog post.

[Contact us](https://support.konghq.com/support/s/)Contact us if you have any questions as you're getting set up.