{"id":14972441,"url":"https://github.com/mwd1993/quykhtml","last_synced_at":"2025-10-26T19:31:27.497Z","repository":{"id":55116630,"uuid":"263336418","full_name":"mwd1993/QuykHtml","owner":"mwd1993","description":"A python library that allows you to quickly and easily generate HTML templates and even create full-on websites.","archived":false,"fork":false,"pushed_at":"2025-01-30T05:09:32.000Z","size":29838,"stargazers_count":19,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T22:51:14.921Z","etag":null,"topics":["ajax","bootstrap","css","css3","form","formbuilder","generated","generated-code","html","html-css-javascript","html5","jquery","markup-language","python","python3","template-metaprogramming","templating"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mwd1993.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-12T12:56:02.000Z","updated_at":"2025-01-31T20:40:29.000Z","dependencies_parsed_at":"2024-10-11T07:01:04.407Z","dependency_job_id":null,"html_url":"https://github.com/mwd1993/QuykHtml","commit_stats":{"total_commits":231,"total_committers":1,"mean_commits":231.0,"dds":0.0,"last_synced_commit":"168250362f6fb8690fb800666c5c6eacdcf18d8e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwd1993%2FQuykHtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwd1993%2FQuykHtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwd1993%2FQuykHtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwd1993%2FQuykHtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mwd1993","download_url":"https://codeload.github.com/mwd1993/QuykHtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","bootstrap","css","css3","form","formbuilder","generated","generated-code","html","html-css-javascript","html5","jquery","markup-language","python","python3","template-metaprogramming","templating"],"created_at":"2024-09-24T13:46:55.466Z","updated_at":"2025-10-26T19:31:27.491Z","avatar_url":"https://github.com/mwd1993.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QuykHtml\nA python library that allows you to quickly and easily generate HTML templates and even create full-on websites.\u003cbr\u003e\u003cbr\u003e\n\nIf you are feeling generous or would like to buy me a coffee or donate, below is my cash app:  \n```cash app: $marcwd1993```\n\n# pip install QuykHtml\n\n[![Downloads](https://pepy.tech/badge/quykhtml)](https://pepy.tech/project/quykhtml)\n\n ![](Example3.gif)\n \n New Features:  \n \t- [Express](#example-express)\u003cbr\u003e\n\nKey Features:\u003cbr\u003e\n\t- [Flask](#example-quykhtml-with-flask)\u003cbr\u003e\n\t- [Chaining together commands](#example-miscellaneous)\u003cbr\u003e\n\t- [Javascript/jQuery support](#example-javascript-code)\u003cbr\u003e\n\t- [Table Creation](#example-tables)\u003cbr\u003e\n\t- [Ajax Creation](#example-ajax-request)\u003cbr\u003e\n\t- [Form Creation](#example-forms)\u003cbr\u003e\n\t- [Boostrap](#example-miscellaneous)\u003cbr\u003e\n\t- [SEO](#example-SEO)\u003cbr\u003e\n\t- [Landing Page Example](#example-simple-landing-page1)\n\t\n\n# Example: Hello World in 4 lines\n\n```python\n# Import the class from the library\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Insert a modified p element into our main display\nq.display.insert(q.new('p').set_text('Hello World').set_id('text-id').style.set('font-size:24px;'))\n\n# Render the page\nq.display.render()\n```\t\n\n# Example: Basic Declaration\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Create a div\ndiv = q.new(\"div\")\n\n#  Create a paragraph\np = q.new(\"p\")\n\n#  Create an input\ninput = q.new(\"input\")\n\n# Render the results by inserting all objects to display\nq.display.insert([div, p, input]).render()\n\n```\n\n# Example: Element Styling\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Declare css, allows for a list of lists, with the first value being\n# classname and the markup/style string for the second value\nq.css.add([[\"div\",\"font-size:32px;\"],[\".div_custom\",\"color:gray;\"]])\n\n# You can also do the same by just calling the add method with two arguments\nq.css.add(\"div\",\"font-size:32px;\")\nq.css.add(\".div_custom\",\"color:gray;\")\n\n# Create a div with the class .div_custom and set the text in the div\ndiv = q.new(\"div\").set_class(\"div_custom\").set_text(\"QuykHtml Rocks!\")\n\n# You can use inline styling to style the element and set the text in the div\ndiv2 = q.new(\"div\").style.set(\"font-size:48px;color:green;\").set_text(\"QuykHtml Rocks!\")\n\n# Render the results\nq.display.insert([div, div2]).render()\n\n```\n\n# Examples: Element Setters\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\np = q.new(\"p\")\n\n# Global Element Setters\np.style.set('color:red;')\np.style.append('background-color:yellow;')\np.add_attribute('title=\"Qhytml is easy!\"')\np.set_text('text')\np.set_text_ipsum()\np.set_text_ipsum_large()\np.set_text_ipsum_small()\np.set_class('class1 class2')\np.set_form_button()\np.set_id('my-id')\np.set_name('some-name')\np.set_value('custom value')\np.set_tool_tip('simple hover text tool tip')\np.on_click(\"alert('i was clicked!');\")\np.on_click_goto('google.com')\np.on_right_click(\"alert('i was right clicked!');\")\np.on_mouse_enter(\"alert('Mouse entered!');\")\np.on_mouse_leave(\"alert('Mouse left!');\")\nhtml = p.html()\n\n# Specific Element setters\nq.new(\"img\").set_img_src('src_url')\nq.new(\"img\").set_img_placeholder(400)\nq.new(\"img\").on_click_showPreview()\nq.new(\"form\").set_form_options('file.php','get')\nq.new(\"button\").set_form_button()\nq.new(\"iframe\").set_iframe('google.com')\nq.new(\"input\").set_auto_complete(False)\n\n```\n\n# Example: Tables\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# Create raw table of 1 row and 2 columns\ntable = q.table(1,2)\n\n# Insert method using 0 based index -\u003e insert_at(row,column,qhtml_object or list of qhtml_objects)\ntable.insert_at(0,0,q.new(\"p\").set_text(\"Row 1 column 1\"))\ntable.insert_at(0,1,q.new(\"p\").set_text(\"Row 1 column 2\"))\n\n# Also valid syntax\ntable = q.table(1,2).insert_at(0,0,q.new(\"p\").set_text(\"Row 1 column 1\")).insert_at(0,1,q.new(\"p\").set_text(\"Row 1 column 2\"))\n\n# Td manipulation examples\nfor i in range(2): \n\ttable.style_td_at(0,i,'text-align:center')\n\ttable.set_td_class_at(0,i,'some-class')\n\ttable.set_td_id_at(0,i,'some-id' + str(i))\n\n# Make sure to build the table \n# which returns a div with the table code in it\ntable = table.build()\n\n# Render the results\nq.display.insert(table).render()\n\t\n```\n\n# Example: JavaScript Code\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# Append a script, can even be read from a file\nq.scripts.append(\n\t'function js_function() {'\n\t'\talert(\"A JS Function\");'\n\t'}'\n)\n\n# Append a script to a qhtml object\np = q.new(\"p\").set_text(\"Text element\").scripts_add(\n\t'function js_function() {'\n\t'\talert(\"A JS Function\");'\n\t'}'\n)\n\n# Append code to be executed on page load to a qhtml object\np = q.new(\"p\").set_text(\"Text element\").scripts_add('alert(\"Js code ran on page load\");', on_page_load=True)\n\nq.display.insert(p).render()\n\n```\n\n# Example: Ajax Request\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# Create an ajax request on the p element\n# Always specify r in the callback function as that is the response text\np = q.new(\"p\").ajax_build('get','file.php?args=1\u0026args2=2\",\"_some_call_back_func(r)')\n\n# Quickly define the function if need be\np.scripts_add('function _some_call_back_func(r){alert(\"Response text \" + r.responseText);}')\n\n# Append JS Code for when the page loads, call the ajax function using\n# element.ajax_get(\"pointer\") \u003c- the 'ajax method built by ajax_build'\np.scripts_add(p.ajax_get(\"pointer\"),on_page_load=True)\n\nq.display.insert(p).render()\n\n```\n\n# Example: Forms\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# Create form element\nform = q.new(\"form\").set_form_options('file.php','post')\n\n# Create the input element and set the name to form_name\ninput = q.new(\"input\").set_name('form_name')\n\n# Create the button and use method .set_form_button() to \n# make it send the form when it is clicked\nbutton = q.new(\"button\").set_text(\"submit\").set_form_button()\n\n# Insert the form elements into the form\nform.insert([input,button])\n\nq.display.insert(form).render()\n\n```\n\n# Example: Express\nEasily use the official markup language (uses bootstrap)  \nto quickly and easily define qhtml objects.  \n#### Express Rules:  \n\t- use attr-'attributename' to declare normal html element attributes  \n\t- use 'attributename' to attempt to use ANY Qhtml setter methods on an element  \n\t- you declare columns by element position in the list  \n\t- each list item is essentially a row  \n\t- requires bootstrap (instantiate with qhtml method)\n\t\n\n#### create a 3 columned row\n```python\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# express method returns\n# an actual qhtml object\nlayout = q.express([\n\t['div','p','div']\n]).style.set('background-color:#45afed;')\n\nq.display.insert(layout).render()\n```\n\n#### create a 3 columned row and define html values\n```python\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# express method returns\n# an actual qhtml object\nlayout = q.express([\n\t['div attr-class=\"myclass\"','p attr-id=\"myid\"','div attr-style=\"background-color:red\"']\n]).style.set('background-color:#45afed;')\n\nq.display.insert(layout).render()\n```\n#### create a 3 columned row and call Qhtml setter methods on said element\n```python\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# a Qhtml object has a method called: set_text\n# it also a method called: set_img_src\n# so we omit the 'set_' prefix. So instead of\n# set_text(\"some text\"), we simply use text=\"some text\"\n# to call said method\nlayout = q.express([\n\t['div','p text=\"QuykHtml Rocks!\"','div'],\n\t['div','img img_src=\"myimagesource.com\" attr-class=\"myImgClass\"','div']\n]).style.set('background-color:#45afed;')\n\nq.display.insert(layout).render()\n```\n\n## Express Real World Example\n\n### create a simple form\n\n```python\n# Instantiate class\nq = qhtml()\n\n# Easily 'import' bootstrap utilities\nq.bootstrap.use(True)\n\n# Define some css\nq.css.add('.center','text-align:center;')\n\n# Create our form elements\nlayout = q.express([\n\t['div', 'p text=\"Email\"', 'div'],\n\t['div', 'input', 'div'],\n\t['div', 'p text=\"Password\"', 'div'],\n\t['div', 'input', 'div'],\n\t['div', 'p text=\"Confirm\"', 'div'],\n\t['div', 'input', 'div'],\n\t['div', 'button text=\"Complete\" attr-value=\"submit\" attr-class=\"margin-top-med signup\"', 'div']\n]).set_class(\"center\", True)\n\n# Create the actual form container element\nform = q.new('form').set_class('center')\n\n# Insert the form elements and set the form options\nform.insert(layout).set_form_options(\"register.php\", \"post\")\n\n# Render the results\nq.display.insert(form)\n```\n\n# Example: SEO\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Define some SEO\nq.seo.set_page_title('Page Title')\nq.seo.set_page_author('Author')\nq.seo.set_page_keywords('some key words')\nq.seo.set_page_encoding('UTF-8')\nq.seo.set_page_auto_refresh(30)  # refresh every 30 seconds\n\nlist_of_seo = q.seo.display_all_seo()\n\n```\n\n# Example: Miscellaneous\n\n```python\n\nfrom QuykHtml import qhtml\n\n# Instantiate class\nq = qhtml()\n\n# Chaining commands\nq.new(\"p\").set_text('some text').set_class('text-class').set_id('text-id').on_click(\"alert('clicked me');\").style.set(\"cursor:pointer;\")\n\n# Render arguments examples\n# output_file str_path, only_html boolean, set_clip_board boolean\nq.display.insert(q.new(\"p.\").set_text(\"Render Arguments\")).render(output_file=\"file/path/file.html\")\nq.display.insert(q.new(\"p.\").set_text(\"Render Arguments\")).render(only_html=True)\nq.display.insert(q.new(\"p.\").set_text(\"Render Arguments\")).render(output_file=\"file/path/file.html\",set_clip_board=True)\nq.display.insert(q.new(\"p.\").set_text(\"Render Arguments\")).render(only_html=True,set_clip_board=True)\nq.display.insert(q.new(\"p.\").set_text(\"Render Arguments\")).render()\n\n# ------------------------------\n# Bootstrap - Support\n# ------------------------------\nq.bootstrap.use(True)\n\ndiv = q.new(\"div\").set_class(\"row\")\ndiv_col1 = q.new(\"div\").set_class(\"col\").set_text(\"column1\")\ndiv_col2 = q.new(\"div\").set_class(\"col\").set_text(\"column2\")\ndiv.insert([div_col1,div_col2])\n\n# Also valid syntax\ndiv = q.new(\"div\").set_class(\"row\").insert([\n\tq.new(\"div\").set_class(\"col\").set_text(\"column1\"),\n\tq.new(\"div\").set_class(\"col\").set_text(\"column2\")\n])\n# ------------------------------\n\n# Append to the head tag\nq.head.append('\u003cscript type=\"text/javascript\" src=\"path/to/js_code.js\"\u003e\u003c/script\u003e')\nq.head.append('\u003clink rel=\"stylesheet\" href=\"path/to/css.css\"\u003e')\n\n# Built in color helpers\nc = q.css.colors\ncolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # and more..\nfor color in colors:\n\tprint(color) # - \u003e #hex_value\n\n# Loop through every created object of a qhtml instance\nfor element in q.all:\n\tprint('Element type - \u003e ' + element.type)\n\telement.set_text(\"Overwrite\")\n\t\n# Duplicating element objects\np_main = q.new(\"p\").style.set(\"font-size:32px;\")\n\np1 = q.dupe(p_main).set_text('p tag number 1').style.append('color:red;')\np2 = q.dupe(p_main).set_text('p tag number 2').style.append('color:green;')\n\n# Exporting css styles added to 'q.css'\nq.css.add('p','font-size:32px;')\nq.css.add('div','text-align:center;')\n\nq.css.export('path/to/export.css')\n\n```\n# Example Simple Landing Page1\n\n``` python\nfrom QuykHtml import qhtml\n\nq = qhtml()\n\nq.bootstrap.use(True)\n\nhead = q.new('div')\nhead_text = q.new('p')\nhead_text.set_text('Example Landing Header').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;background-color:gray;color:white;')\nhead.insert(head_text)\n\nbody = q.new('div').style.set('width:65%;margin:auto;margin-bottom:100px;').set_class('row')\nbody_text = q.new('p').set_text_ipsum_large().style.font_size('24px').style.align('left').style.append('margin-top:60px;margin-bottom:60px;').style.font_color('gray')\nbody_img_1 = q.new('img').set_class('col').set_img_placeholder(400).style.height('400px').style.append('margin-top:20px;')\nbody_img_2 = q.dupe(body_img_1)\nbody.insert([body_text,body_img_1,body_img_2])\n\nfooter = q.new('div').style.align('center').style.set('margin:0px;position:fixed;bottom:0px;width:100%;background-color:gray;padding-top:5px;padding-bottom:5px;')\nfooter_text = q.new('p').style.set('font-weight:bold;margin:0px;')\nfooter_text.set_text('Example Footer Text. All Right Reserved.').style.align('center').style.font_size('15px').style.font_color('white')\nfooter.insert(footer_text)\n\nq.display.insert([head,body,footer]).render()\n\n```\n\n# Example QuykHtml with Flask\n\n## Using pythonanywhere.com\n\n\n\n#### Serving HTML using .html() method\n\n```python\n# A very simple Flask Hello World app for you to get started with...\nfrom QuykHtml import qhtml\nfrom flask import Flask\n\nq = qhtml()\nq.bootstrap.use(True)\napp = Flask(__name__)\n\n# always use \" \" as the outer string quote and ' ' inside if need\non_click_code = \"alert('You clicked the button!');\"\n\n# Div containing a p element and a button with an on click event\ndiv = q.new('div').style.set('text-align:center;').insert([\n    q.new(\"p\").style.font_size('42px').set_text(\"This works\"),\n    q.new('button').style.font_size('24px').set_text('click me').on_click(on_click_code)\n])\n\n# Div containing a p element with Greeting text in it\ndiv2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([\n    q.new('p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('Hello from QuykHtml and Flask!')\n])\n\n@app.route('/')\ndef hello_world():\n\t# Use .html method on a qhtml object to get it's HTML and serve it\n    return div.html() + div2.html()\n```\n\n#### Serving HTML using .render('out_put_file.txt') and .file_read('file.txt')\n\n```python\n# A very simple Flask Hello World app for you to get started with...\nfrom QuykHtml import qhtml\nfrom flask import Flask\n\nq = qhtml()\nq.bootstrap.use(True)\n\napp = Flask(__name__)\n\n# always use \" \" as the outer string quote and ' ' inside if need\non_click_code = \"alert('You clicked the button!');\"\n\n# Div containing a p element and a button with an on click event\ndiv = q.new('div').style.set('text-align:center;').insert([\n    q.new(\"p\").style.font_size('42px').set_text(\"This works\"),\n    q.new('button').style.font_size('24px').set_text('click me').on_click(on_click_code)\n])\n\n# Div containing a p element with Greeting text in it\ndiv2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([\n    q.new('p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('Hello from QuykHtml and Flask!')\n])\n\n# Place objects in the display and render out the file to test.txt\nq.display.insert([div,div2]).render(output_file='test.txt', only_html=True)\n\n@app.route('/')\ndef hello_world():\n\t# Use file_read method to get the rendered HTML and serve it\n    html = q.file_read('test.txt')\n    return html\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwd1993%2Fquykhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmwd1993%2Fquykhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwd1993%2Fquykhtml/lists"}