{"slug": "embedding-workouts-using-web-component", "title": "Embedding Workouts using Web Component", "summary": "Thejesh GN created muscle-map, an open-source web component that embeds SVG representations of workouts by muscle group, and released it on GitHub. The component converts a list of exercises into tagged muscle groups, applies styles within the SVG, and can be embedded on any web page via a custom HTML tag or a WordPress shortcode. The project, which includes a cleaned-up SVG based on a Wikimedia Commons drawing by OpenStax, Tomáš Kebert, and umimeto.org, is available at github.com/thejeshgn/muscle-map.", "body_md": "# Embedding Workouts using Web Component\n\nI wanted a way to represent workouts by the muscle groups they activate. Most applications where you log do it. I thought it must be easy with SVG images. It wasn’t as easy. First, I had to get an image that is remake-friendly. I used this [drawing](https://commons.wikimedia.org/w/index.php?curid=94071041) by *OpenStax & Tomáš Kebert & umimeto.org*, from Wikimedia Commons. Cleaned it up to reduce the complexity. Then tagged each muscle group, including separating left and right muscles, in case you focus on one side.\n\nAfter that, I wanted an easy way to embed it on any web page. I chose to use web components. It converts the given list of exercises into muscle groups, then applies styles to them within the SVG and embeds the SVG. I have verified it to the best of my knowledge and from available sources. It took a lot of battling with Claude to make it the way I want, that is, to make it generic and reusable. I still have to map a bunch of muscle groups, I have listed all the [short comings in the readme](https://github.com/thejeshgn/muscle-map).\n\nFinally, I created a WordPress shortcode to queue the JavaScript and embed the component. But that’s not really required. If you have a simple static site, then you can include SVG and a JS file and use the [muscle-map](https://github.com/thejeshgn/muscle-map) tag in your HTML\n\n#### Wednesday Workout\n\n#### Run\n\n#### Calf raise, Tibialis raise\n\n#### Calf raise\n\nHappy workout and happy logging.", "url": "https://wpnews.pro/news/embedding-workouts-using-web-component", "canonical_source": "https://thejeshgn.com/2026/08/16/embedding-workouts-using-web-component/", "published_at": "2026-08-16 16:15:06+00:00", "updated_at": "2026-08-25 14:45:28.545419+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Thejesh GN", "muscle-map", "GitHub", "OpenStax", "Tomáš Kebert", "umimeto.org", "Wikimedia Commons", "WordPress"], "alternates": {"html": "https://wpnews.pro/news/embedding-workouts-using-web-component", "markdown": "https://wpnews.pro/news/embedding-workouts-using-web-component.md", "text": "https://wpnews.pro/news/embedding-workouts-using-web-component.txt", "jsonld": "https://wpnews.pro/news/embedding-workouts-using-web-component.jsonld"}}