Giter VIP home page Giter VIP logo

django-template-previewer's Introduction

Django Template Previewer

This is a django app to be used in development environments only. Its purpose is to allow template writers to preview rendering of the templates providing a handcrafted context, without having to write view code.

Its goal it's provide template designers a way to test designs and UI without having to modify code, or generate custom data.

Installation

You can install as any standard python package, from zip file or pypi:

pip install django-template-previewer

After that, all you need to do is enable the app into your django project adding it to the INSTALLED_APPS setting in settings.py:

INSTALLED_APPS = (
    # ... yor regular apps here

    'template_previewer',
)

Also, you should include url routes from the app into your urls.py:

    urlpatterns = patterns('',
        url(r'^_preview/', include('template_previewer.urls')),
        # ..Your regular URL patterns here
    )

You should disable the application in production environments, as it exposes implementations details, and may allow unauthorized access to data and execution of code.

No syncdb/migration is required; this application does not use the database.

The app assumes you are using Django's app template loader and app staticfile finder. Otherwise, its views won't work properly.

Note that you require Django 1.4

Usage

Assuming you installed using the url route in the example above, and that you are using the standard django development server locally (manage.py runserver), you should get the template previewer UI by visiting http://localhost:8000/_preview/ with your browser. Javascript is required.

You should see something similar to:

Screenshot

The lower box is an html iframe where the preview will be shown. The template previewer UI can be folded/unfolded by clicking on its title.

There you can type a template name in the text box, and click on "Update context". The template name should be written as a path reachable to your template loader (i.e., any valid first argument to django.template.loader.get_template). If the template is reachable and can be successfully loaded, the previewer UI will add entry boxes labeled with the names of template variables required in the template.

For example, assuming we have the following template calles sample.html:

<h1>{{ title }}</h1>
<ul>
{% for item in foo.bar %}
    <li>{{ item.last_name }}, {{ item.first_name }}</li>
{% endfor %}
<ul>

You'll get something like:

Screenshot

There you can fill up some values, and click on Preview, getting the following:

Screenshot

or, hiding the previewer UI:

Screenshot

That's essentially all there is to it. You can keep editing the context and refreshing the preview. If you are using the development server, updating the template file and clicking preview again should refresh too (allowing for a quick edit+preview cycle once you have a nice sample context ready)

Licensing

This package was written by Daniel F. Moisset [email protected] at Machinalis, and is © Machinalis, licensed under the BSD (see LICENSE for details).

Javascript files included in the template_previewer/static/js directory (but not its subdirectories) are third party libraries, copyright their respective owners. Check the files for licensing details.

django-template-previewer's People

Contributors

dmoisset avatar

Watchers

James Cloos avatar Rodrigo Eliseu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.