https://github.com/adamghill/dj-angles

Add more HTML to your Django templates </>
https://github.com/adamghill/dj-angles

css django django-templates html web-components

Last synced: 5 days ago
JSON representation

Add more HTML to your Django templates </>

• Host: GitHub
• URL: https://github.com/adamghill/dj-angles
• Owner: adamghill
• License: mit
• Created: 2024-09-01T20:25:48.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-11-22T13:14:34.000Z (2 months ago)
• Last Synced: 2025-01-22T22:52:46.421Z (8 days ago)
• Topics: css, django, django-templates, html, web-components
• Language: Python
• Homepage: https://dj-angles.adamghill.com
• Size: 322 KB
• Stars: 29
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  
dj-angles </>


![PyPI](https://img.shields.io/pypi/v/dj-angles?color=blue&style=flat-square)

![PyPI - Downloads](https://img.shields.io/pypi/dm/dj-angles?color=blue&style=flat-square)

![GitHub Sponsors](https://img.shields.io/github/sponsors/adamghill?color=blue&style=flat-square)

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

- 📖 Complete documentation: https://dj-angles.adamghill.com/

- 📦 Package: https://pypi.org/project/dj-angles/

## ⭐ Features

- Use HTML-like elements in Django templates, e.g. `` instead of `{% include 'partial.html' %}`

- Wraps `include` templates in a custom element for easier debugging and targeted CSS styling

- Can be sprinkled in as needed to enhance existing Django functionality

- Since it looks like HTML, syntax highlighting mostly "just works"

- Integrates with Django component libraries like [django-bird](https://django-bird.readthedocs.io)

- Lets you excitedly tell your friends how neat the Shadow DOM is

- Pretend like you are writing React components, but without dealing with a JavaScript build process

## 💥 Example

**base.html**

```html

  

  

```

**index.html**

```html

  

  

    

    

    This is verbatim: {% include %}

    

    

    this is a comment

    

    

    This is escaped

    

    

    This is not escaped

    

    

  

    

    

    

  

```

**partial.html**

```html



  This is a partial: {{ now|date:"c" }}



```


## 📖 Documentation

To learn how to install and use `dj-angles` see the complete documentation at https://dj-angles.adamghill.com/.

## ✨ Inspiration

- [Web Components](https://web.dev/learn/html/template)

- [Cotton](https://django-cotton.com) by [wrabit](https://github.com/wrabit)

## 🙌 Contributors

  

    

      
Emmanuelle Delescolle
💻 ⚠️ 📖