Javascript 在作为最终样式提交之前预览CSS

我正在尝试制作一个界面，用户可以在其中编辑他们的“用户样式”css表并预览它。如果他们喜欢他们所看到的，他们可以做出承诺

以下是我到目前为止所做的，作为一个非常基本的初步草图：

class EditStylesForm(Form):
    """ a form to edit CSS styles """
    css = TextAreaField()
    submit = SubmitField('Commit Changes')

在意见中：

@admin.route('/styles', methods=['GET', 'POST'])
def styles():
    """ render a form in which they can render stylesheets """
    try:
        with admin.open_resource('static/scss/user_styles.css') as f:
            form = EditStylesForm(css=f.read())
    except IOError:
        form = EditStylesForm()

    if form.validate_on_submit():
        with open(os.path.join(current_app.root_path, 'static/scss/user_styles.css'), mode="w") as f:
            f.write(form.css.data)
    return render_template('admin/styles.html', form=form)

（是的，我知道这是不安全的，可以改进）。这将使用文本区域中显示的css文件编写一个文件

然而，我理想的情况是在提交css并将其添加到网站样式表之前预览css。我想这样的事情最好在前端处理

---

有没有办法为样式创建“预览”视图？

QtWebKit（Qt的一部分，它有可用的Python绑定-搜索PySide或PyQt）有一个功能非常全面的Web显示引擎，支持样式表。您可以在python应用程序中显示网页，并根据用户输入动态更改其样式表。

这可以集成到web应用程序本身中，还是建议创建单独的GUI？